# react-infinite-component

> React Infinite Scroll Component

Latest version **1.0.2** (published 2020-01-31) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-infinite-component
pnpm add react-infinite-component
yarn add react-infinite-component
bun add react-infinite-component
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-01-31 |
| First published | 2020-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 33.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | snyung |
| Maintainers | seonhyung_jo |
| Keywords | react, infinite-scroll, infinite, component, intersection-observer |

## Links

- npm: https://www.npmjs.com/package/react-infinite-component
- Repository: https://github.com/seonhyungjo/react-infinite-component
- Homepage: http://github.com/seonhyungjo/react-infinite-component/
- Issues: https://github.com/seonhyungjo/react-infinite-component/issues
- npm.io page: https://npm.io/package/react-infinite-component

## 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

- 1.0.2 (latest) — 2020-01-31
- 1.0.1 — 2020-01-26
- 1.0.0 — 2020-01-26
- 0.2.0 — 2020-01-26
- 0.1.0 — 2020-01-26

## README

<p align="center">
    <a href="https://seonhyungjo.github.io/react-intinite-component/"><img width="140" src="./static/infinite-logo.png" alt="React Infinite Scroll Component"/></a>

<h1 align="center">React Infinite Scroll Component</h1>

<div align="center">

[![NPM](https://img.shields.io/npm/v/react-infinite-component.svg)](https://www.npmjs.com/package/react-infinite-component) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

<img width="100%" border="1px solid black" src="./static/infinite-example.gif" alt="React Infinite Scroll Component"/>

</div>

## Install

```bash
npm install --save react-infinite-component
```

## Usage

```tsx
import * as React from 'react'

import InfiniteScroll from 'react-infinite-component'

class Example extends React.Component {
  render () {
    return (
      <InfiniteScroll loadingFunc={() => fetchDate()} hasMore={this.state.moreFlag} loader={<h4>로딩 중...</h4>}>
          <img src='https://images.unsplash.com/photo-1578763713067-ab058f88be3a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixlib=rb-1.2.1&q=80&w=400' className={"innerDiv"} />
          <img src='https://images.unsplash.com/photo-1578483001364-b508612cde4a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixlib=rb-1.2.1&q=80&w=400' className={"innerDiv"} />
      </InfiniteScroll>
    )
  }
}
```

## License

MIT © :mouse:[snyung](https://github.com/seonhyungjo)

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