scroll-rig
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

Scroll Rig

A React scroll rig for custom scroll bar styles and controlled scrolling state.

Getting Started

Install the package:

npm add scroll-rig

Basic Example

A callback with the state object to do something with

<ScrollRig
  // Do something when the scroll updates
  onScrollUpdate={(state) => console.log(state.progress.y)}
>
  components...
</ScrollRig>

API Example

Usage of the API via a ref. Call methods or read state from the API of the ScrollRig.

function Example() {
  const scrollRef = React.useRef();

  React.useEffect(() => {
    scrollRef.current.update();
  }, []);

  return (
    <ScrollRig
      ref={scrollRef}
      // Do something when the scroll updates
      onScrollUpdate={(state) => console.log(state.progress.y)}
    >
      components...
    </ScrollRig>
  );
}

Important

Make sure the parent element for the ScrollRig has overflow: hidden on it or the ScrollRig won't work

Props

Prop Type Default Description
onScrollUpdate (state) => {} undefined Callback for every scroll event with current scroll state
native boolean false When true will switch to the native browser scroll
scrollBarSize string 15px Size of the scrollbars
classNamePrefix string scroll-rig Prefix for the classes on the scroll elements
controlled boolean false If true will disable scroll until api.update() is called

API

Prop Type Description
update () => {} Update the scroll
onScroll (fn) => {} Callback function executed on every scroll event
state object State of the scroll rig

Contributing

Install and run the development server:

npm install
npm start

Readme

Keywords

none

Package Sidebar

Install

npm i scroll-rig

Weekly Downloads

0

Version

0.0.4

License

none

Unpacked Size

649 kB

Total Files

27

Last publish

Collaborators

  • enijar