# react-virtualized-listview

> A simple virtualized listview inspired by react-virtualized

Latest version **0.1.7** (published 2018-10-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-virtualized-listview
pnpm add react-virtualized-listview
yarn add react-virtualized-listview
bun add react-virtualized-listview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2018-10-10 |
| First published | 2018-06-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nishan Bajracharya |
| Maintainers | nisbaj |
| Keywords | react, virtualized, list, virualized-list |

## Links

- npm: https://www.npmjs.com/package/react-virtualized-listview
- Repository: https://github.com/nishanbajracharya/react-virtualized-listview
- Homepage: https://github.com/nishanbajracharya/react-virtualized-listview#readme
- Issues: https://github.com/nishanbajracharya/react-virtualized-listview/issues
- npm.io page: https://npm.io/package/react-virtualized-listview

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.7 (latest) — 2018-10-10
- 0.1.6 — 2018-10-10
- 0.1.5 — 2018-09-10
- 0.1.4 — 2018-09-10
- 0.1.3 — 2018-06-12
- 0.1.2 — 2018-06-12
- 0.1.1 — 2018-06-12
- 0.1.0 — 2018-06-12

## 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 = [1, 2, 3, 4, 5];

<List
  source={data}
  rowHeight={40}
  renderItem={({ index, style }) => (
    <div key={index} style={style}>
      Hello {index}
    </div>
  )}
/>
```

## 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.                                                                                                              |
| 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
}) => <RowItem key={index} index={index} style={style}/>
```
**Note:** Passing the `style` prop and applying in the root element of the row item is **required**

## Features planned for next release
- Lists with dynamic height
- 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

---
_Source: https://npm.io/package/react-virtualized-listview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._