React-use-scroll-hooks NPM

React useScrollHooks

Install

yarn add react-use-scroll-hooks

Quick Start

useScroll Hooks

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

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

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

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