react-use-scroll-hooks
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

React useScrollHooks

GitHub npm Travis (.com)

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.

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-use-scroll-hooks

Weekly Downloads

1

Version

1.1.4

License

MIT

Unpacked Size

30.7 kB

Total Files

29

Last publish

Collaborators

  • gakiclin