# react-intersection-observer-scroll

> React typescript scroll block with Intersection Observer features

Latest version **1.0.3** (published 2023-03-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-intersection-observer-scroll
pnpm add react-intersection-observer-scroll
yarn add react-intersection-observer-scroll
bun add react-intersection-observer-scroll
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-03-09 |
| First published | 2023-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Andrii Shevchenko |
| Maintainers | avesheva |
| Keywords | react, javascript, typescript, scroll, infinite scroll, intersection observer, lazy loading |

## Links

- npm: https://www.npmjs.com/package/react-intersection-observer-scroll
- Homepage: https://github.com/avesheva/react-intersection-observer-scroll
- npm.io page: https://npm.io/package/react-intersection-observer-scroll

## 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.3 (latest) — 2023-03-09
- 1.0.2 — 2023-02-23
- 1.0.1 — 2023-02-23
- 1.0.0 — 2023-02-23

## README

# react-intersection-observer-scroll

React lightweight, easy to use scroll typescript component. Built with [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) api, allows tracking scroll items position, state, visibility, scroll direction, etc. Could be used for list lazy loading, infinite scroll implementation, viewed items marking and so on.

## Installation
```shell
# with npm
npm install react-intersection-observer-scroll
```
```shell
# with yarn
yarn add react-intersection-observer-scroll
```


## Types
```typescript
interface IIntersectionData {
  scrollDirection: 'up' | 'down',
  entries: IntersectionObserverEntry[],
}
```

## Basic usage
```javascript
import SmartScroll from 'react-intersection-observer-scroll'

function App() {
  const someList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // Just for example. You can wrap any content you want

  const intersectionCallback = (data: IIntersectionData) => {
    console.log('Parent scroll callback : ', data)
  }

  return (
    <div className="App">
      <SmartScroll
        wrapperId="smartScrollContainer"
        intersectionCallback={ intersectionCallback }
      >
        { someList.map((item) => <div key={ item } className="listItem" data-index={ item }>
          ITEM : { item }
        </div>) }
      </SmartScroll>
    </div>
  )
}

export default App
```

## Props
| NAME                  | TYPE                              | DEFAULT          | DESCRIPTION |
|-----------------------|-----------------------------------|------------------|-------------------------------|
| wrapperId?            | String                            | rssListWrapper   | Main block id. Component starts tracking this block and its children for intersections           |
| intersectionCallback? | (scrollData: IScrollData) => any  | -                | Intersection event handler. Fires when child component intersect with main block and becomes hidden or visible   |
| callbackDelay?(ms)    | Number                            | 0                | Delay for calback function in milliseconds     |
| checkViewing?      | Boolean          | false                | If __*true*__, component stop observing item in main block after first intersection. Improves performance. Can be used with message/notifications lists, for example, when you need to check item visibility only once
| threshold?            | number, number[]                  | 0                | [Intersection Observer constructor](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) options param |
| rootMargin?           | String                            | -                | [Intersection Observer constructor](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) options param |

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