# react-use-scroll-hooks

> ![GitHub](https://img.shields.io/github/license/Luncher/react-use-scroll?style=for-the-badge) ![npm](https://img.shields.io/npm/v/react-use-scroll-hooks?style=for-the-badge) ![Travis (.com)](https://img.shields.io/travis/com/Luncher/react-use-scroll?style

Latest version **1.1.4** (published 2022-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-scroll-hooks
pnpm add react-use-scroll-hooks
yarn add react-use-scroll-hooks
bun add react-use-scroll-hooks
```

## 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.1.4 |
| Published | 2022-09-26 |
| First published | 2022-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=v12.0.0 |
| Dependencies | 2 |
| Unpacked size | 29.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | chen |
| Maintainers | gakiclin |

## Links

- npm: https://www.npmjs.com/package/react-use-scroll-hooks
- npm.io page: https://npm.io/package/react-use-scroll-hooks

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.4.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.2

## Recent versions

- 1.1.4 (latest) — 2022-09-26
- 1.1.3 — 2022-09-26
- 1.1.2 — 2022-09-25
- 1.1.1 — 2022-09-25
- 1.1.0 — 2022-09-25
- 1.0.1 — 2022-09-19
- 1.0.0 — 2022-09-18

## README

## React useScrollHooks

![GitHub](https://img.shields.io/github/license/Luncher/react-use-scroll?style=for-the-badge)
![npm](https://img.shields.io/npm/v/react-use-scroll-hooks?style=for-the-badge)
![Travis (.com)](https://img.shields.io/travis/com/Luncher/react-use-scroll?style=for-the-badge)


### Install

```shell
yarn add react-use-scroll-hooks
```

### Quick Start

#### useScroll Hooks

```js
import classNames from 'classnames'
import useScroll from 'react-use-scroll-hooks'

function App({ children }: React.PropsWithChildren<{}>) {
  const { scrollRef, scrollState } = useScroll()

  const className = classNames({
    wrapper: true,
    'wrapper-shadow-left': scrollState.leftScrollable,
    'wrapper-shadow-right': scrollState.rightScrollable
  })

  return (
    <div className={className}>
      <ul className="list" ref={scrollRef}>
        {children}
      </ul>
    </div>
  )
}
```

#### Scroll Container

```jsx
import { ScrollContainer } from 'react-use-scroll-hooks'

export function Container() {
  const [items, setItems] = useState(['foo', 'bar'])

  const handleAddItem = () => {
    setItems((items) => [...items, `item:${items.length + 1}`])
  }

  return (
    <div>
      <ScrollContainer classNames='container'>
        <ul className="list">
          {items.map((it) => (
            <li className="item" key={it}>{it}</li>
          ))}
        </ul>
      </ScrollContainer>
      <button onClick={handleAddItem}>add Item</button>
    </div>
  )
}
```

### Reference

#### useScroll

```ts
const { scrollRef, scrollState } = useScroll()
```

- `scrollRef`: `React.RefCallback<HtmlElement>` - The ref callback for the scrollable element.
>why?: https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

- `scrollState`: `ScrollState` - The scroll state of the scrollable element.
  - `horizontal state:`
  - `hScrollable`: `boolean` - Whether the scrollable element is horizontally scrollable.
  - `leftScrollable`: `boolean` - Whether the scrollable element can be scrolled to the left.
  - `rightScrollable`: `boolean` - Whether the scrollable element can be scrolled to the right.
  - `scrollWidth`: `number` - The scrollWidth of the scrollable element.
  - `clientWidth`: `number` - The clientWidth of the scrollable element.
  - `reachLeft`: `number` - Whether the scrolling element has been scrolled to the left.
  - `reachRight`: `number` - Whether the scrolling element has been scrolled to the right.

  - `vertical state:`
  - `vScrollable`: `boolean` - Whether the scrollable element is vertical scrollable.
  - `topScrollable`: `boolean` - Whether the scrollable element can be scrolled to the top.
  - `bottomScrollable`: `boolean` - Whether the scrollable element can be scrolled to the bottom.
  - `scrollHeight`: `number` - The scrollHeight of the scrollable element.
  - `clientHeight`: `number` - The clientHeight of the scrollable element.
  - `reachTop`: `number` - Whether the scrolling element has been scrolled to the top.
  - `reachBottom`: `number` - Whether the scrolling element has been scrolled to the bottom.

#### ScrollContainer

```ts
<ScrollContainer onChange={} style={} classNames={} children as={} htmlProps={} />
```

- `onChange`: `function` - The callback function when the scroll state changes.
- `style`: `object` - The style of the scrollable container element.
- `classNames`: `ScrollableContainerClassNames` - The class name of the scrollable container element. `string` or `object`:
  - `normal`: `string` - The normal class name of the scrollable container element.
  - `leftScrollable`: `string` - The class name of the scrollable container element when scrollable element has `leftScrollable` state.
  - `rightScrollable`: `string` - The class name of the scrollable container element when scrollable element has `rightScrollable` state.
  - `topScrollable`: `string` - The class name of the scrollable container element when scrollable element has `topScrollable` state.
  - `bottomScrollable`: `string` - The class name of the scrollable container element when scrollable element has `bottomScrollable` state.
> A single name can be provided, which will be suffixed for each stage. For example, `container` will be suffixed to `container-left-scrollable`, `container-right-scrollable`, `container-top-scrollable`, `container-bottom-scrollable`.
- `as`: `ComponentType` - `ScrollContainer` render `div` by default, You can change this behavior by providing a as prop.
- `children`: `ReactElement|(ref, scrollState)=>ReactNode` - The children of the scrollable container element.(That is, scrollable elements). **If that type is `ReactElement`, it must be able to receive ref props. (that is: React.forwardRef wrapped  function component, html element, or class component)**
- `htmlProps`: `object` - The html props of the scrollable container element.

### How

#### callbackRef
>https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

#### Listen Scroll Event
>https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event

#### mutationObserver observe dynamic content
>Why mutationObserver? https://stackoverflow.com/questions/44428370/detect-scrollheight-change-with-mutationobserver


### Third-Party Resources

[scroll-shadows-with-javascript](https://css-tricks.com/scroll-shadows-with-javascript/)

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