# scrollify-list

> Super easy client-side infinite scroll for React.

Latest version **0.6.1** (published 2019-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install scrollify-list
pnpm add scrollify-list
yarn add scrollify-list
bun add scrollify-list
```

## 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.6.1 |
| Published | 2019-11-24 |
| First published | 2017-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | anttikon |
| Keywords | list, scroll, pagination |

## Links

- npm: https://www.npmjs.com/package/scrollify-list
- Repository: https://github.com/anttikon/scrollify-list
- Homepage: https://github.com/anttikon/scrollify-list#readme
- Issues: https://github.com/anttikon/scrollify-list/issues
- npm.io page: https://npm.io/package/scrollify-list

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-waypoint](https://npm.io/package/react-waypoint.md) ^9.0.2

## Recent versions

- 0.6.1 (latest) — 2019-11-24
- 0.6.0 — 2019-11-24
- 0.4.2 — 2018-11-04
- 0.4.1 — 2018-11-04
- 0.3.3 — 2018-10-16
- 0.3.2 — 2017-10-22
- 0.3.1 — 2017-10-21
- 0.3.0 — 2017-10-21

## README

## scrollify-list
Super easy client-side infinite scroll for React.

Handy in a situation where you are needed to render a big chunk of data.

![Usage](https://raw.githubusercontent.com/anttikon/scrollify-list/master/misc/demo.gif)

## Install:
`npm install --save scrollify-list`

## How to use ([basic example](https://github.com/anttikon/scrollify-list/blob/master/examples/basic/)):
```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import ScrollifyList from 'scrollify-list'

const generateData = () =>
  Array(500)
    .fill(null)
    .map(() => ({
      id: Math.random()
        .toString(36)
        .substring(7),
      name: Math.random()
        .toString(36)
        .substring(7),
    }))

const App = () => (
  <ScrollifyList
    data={generateData()}
    render={data => <h1 key={data.id}>{data.name}</h1>}
  />
)

ReactDOM.render(<App />, document.getElementById('example'))
```

## Configure
Property | Explanation
------------ | -------------
data | Your data! Array of something.
render | How do you want to render your data?
pageSize | How many rows in one page? Defaults to 15.

## Develop
1. `npm run dev`
2. `cd examples/basic/ && npm install && npm run start`
3. Go to http://localhost:1234/
4. Make changes to /src/index.js
5. ???
6. Profit! 😎✌️

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