mir3z / React Virtual List
Licence: mit
Virtual list in React
Stars: ✭ 147
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Virtual List
In View
Get notified when a DOM element enters or exits the viewport. 👀
Stars: ✭ 4,684 (+3086.39%)
Mutual labels: viewport
Pixi Cull
a library to visibly cull objects designed to work with pixi.js
Stars: ✭ 51 (-65.31%)
Mutual labels: viewport
Preact Scroll Viewport
Preact Component that renders homogeneous children only when visible
Stars: ✭ 118 (-19.73%)
Mutual labels: viewport
Viewport Checker
Little utility to detect if elements are currently within the viewport 🔧
Stars: ✭ 596 (+305.44%)
Mutual labels: viewport
React Intersection Observer
React component for the Intersection <Observer /> API
Stars: ✭ 940 (+539.46%)
Mutual labels: viewport
Element In View
Check if an element is in viewport. (580 bytes and IE9+)
Stars: ✭ 54 (-63.27%)
Mutual labels: viewport
Vue Mq
📱 💻 Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue.
Stars: ✭ 474 (+222.45%)
Mutual labels: viewport
Mobile Web Favorites
This is a favorites, with a mobile web tips.
Stars: ✭ 1,724 (+1072.79%)
Mutual labels: viewport
Viewprt
A tiny, dependency-free, high performance viewport position & intersection observation tool
Stars: ✭ 36 (-75.51%)
Mutual labels: viewport
Isonscreen
Simple jQuery plugin to determine if an element is within the viewport
Stars: ✭ 115 (-21.77%)
Mutual labels: viewport
Isinviewport
An ultra-light jQuery plugin that tells you if an element is in the viewport but with a twist.
Stars: ✭ 646 (+339.46%)
Mutual labels: viewport
React Cool Inview
😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
Stars: ✭ 830 (+464.63%)
Mutual labels: viewport
Pixi Viewport
A highly configurable viewport/2D camera designed to work with pixi.js
Stars: ✭ 532 (+261.9%)
Mutual labels: viewport
Motus
Animation library that mimics CSS keyframes when scrolling.
Stars: ✭ 502 (+241.5%)
Mutual labels: viewport
React Hook Inview
React hook for detecting when an element is in the viewport
Stars: ✭ 52 (-64.63%)
Mutual labels: viewport
React Viewport Slider
react-viewport-slider is a react component (obviously) that displays a sequence of contents using 100% of the viewport with and height.
Stars: ✭ 144 (-2.04%)
Mutual labels: viewport
Use Is In Viewport
A react hook to find out if an element is in a given viewport with a simple api.
Stars: ✭ 129 (-12.24%)
Mutual labels: viewport
React Virtual List
Virtual vertical list component in React. Displays thousands of items without breaking a sweat!
Overview
This component allows to create very long lists that work extremely fast. This is achieved by rendering only the part of the list visible on the viewport.
Demo
Usage
The library is released as UMD module. Just load it in any way you like. If you include it directly on the web page
it is exposed as VirtualList
global.
The component accepts the following props:
-
items
(array
, default:[]
) - array of all list items. -
itemFactory
(function
, required) - the function that receives item as param and renders single list item asReactElement
. -
itemHeight
(number
, required) - the height of the item in pixels. It has to be set in CSS rules as well. -
bufferSize
(number
, default:0
) - the number of items that may be rendered before and after the visible part of the list. -
viewport
(DOMElement
, default:window
) - the element that contains the list. Use this if you want to place list inside a scrollable container. -
tagName
(string
, default:ul
) - tag name of the container that contains list items.
Example
var items = [];
for (var i = 0; i < 1000; i++) {
items.push({ number: i });
}
function createItem(item, props, state) {
return <li key={ item.number }>Item #{ item.number }><li>;
}
<VirtualList items={ items } itemFactory={ createItem } itemHeight={ 100 } />
License
The MIT License (MIT). Copyright (c) 2016 mirz ([email protected])
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].