Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nishanbajracharya/react-virtualized-listview
A simple virtualized listview inspired by react-virtualized
https://github.com/nishanbajracharya/react-virtualized-listview
javascript react virtualizedlist
Last synced: about 12 hours ago
JSON representation
A simple virtualized listview inspired by react-virtualized
- Host: GitHub
- URL: https://github.com/nishanbajracharya/react-virtualized-listview
- Owner: nishanbajracharya
- License: mit
- Created: 2018-06-12T13:08:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T07:18:18.000Z (almost 2 years ago)
- Last Synced: 2024-11-17T11:13:09.765Z (3 days ago)
- Topics: javascript, react, virtualizedlist
- Language: JavaScript
- Homepage: https://2zo5k84lx0.codesandbox.io/
- Size: 1.38 MB
- Stars: 46
- Watchers: 3
- Forks: 6
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-virtualized-listview
A simple virtualized listview inspired by react-virtualized
## Getting started
The first step is to add `react-virtualized-listview` into your project.
```sh
$ npm install --save react-virtualized-listview
```
**Note:** This library is not dependent on `react-virtualized` which is a separate and highly customizable virtualized list library.
## Usage
Import the package into your project using the `import` statement
```js
import List from 'react-virtualized-listview';
```
### Example
```jsx
const data = [{
number: 1,
height: 40
}, {
number: 2,
height: 40
},{
number: 3,
height: 40
}, {
number: 4,
height: 40
}, {
number: 5,
height: 40
}];
(
Hello {index}
)}
/>
```
## API
| Prop | Default | Required? | Description |
|:-------------:|:-------:|:---------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
| source | [ ] | Yes | An array of the input source. The array is iterated over and index of each item is returned in the `renderItem` prop. *source.item* shold be have *height* property. |
| rowHeight | 24 | No | The height of each row in the list. |
| overScanCount | 5 | No | The number of rows to render above and below the visible list window. This is to have some rows already rendered while scrolling above or below the visible list window so that they don't pop in as soon as the list is scrolled. |
| renderItem | | Yes | The function that is called when rendering each row.|
### renderItem
The renderItem function signature is as follows
```jsx
({
index, // The index of each item in the source prop
style // The style that is applied to the row item
}) =>
```
**Note:** Passing the `style` prop and applying in the root element of the row item is **required**
## Features planned for next release
- Expose internal components using default CSS classnames, custom classname injection and refs
- Add scroll persistence so that the scroll position persists between route changes
## Contributing
To contribute, follow one of the two options:
- **Open an Issue**
Open an issue detailing:
1. What the issue is
2. Steps to reproduce
3. Possible solutions
Note: These details are recommended but are entirely optional.
- **Send a Pull Request**
Fork this project and send a pull request to the `master` branch.
## License
MIT