# Scrolling **Cross-browser scroll hooks** to manage scrolling between react elements. ## Features - **Cross Browser** - **Scroll Inside Container** - **Scroll Entire Document** - **Simple Hook Based API** - **Efficient** ## Hooks - **useScroll**: A hook to manage the scrolling between elements. - **useScrollSequence**: Includes ref management on top of `useScroll`. Use the `createScrollRef` function returned by the hook to quickly attach refs to a sequence of elements, then use `next`, `previous` and `goToPosition` methods to scroll between them. # useScroll Hook The `useScroll` hook can be used to scroll an entire document or within a container. ## Usage ```javascript import { useScroll } from 'react-scroll-hooks'; const Component = () => { const containerRef = React.useRef(); const elementRef = React.useRef(); const scrollSpeed = 50; const { scrollToElement, scrollToY } = useScroll({ scrollSpeed, containerRef }) return (

) } ``` **Note**: The container in which scrolling occurs requires the following CSS properties to work as expected: ```css position: relative; overflow: scroll; ``` ## Props The hook takes an **object** as a parameter with the following properties: | Parameter | Type | Default | Description | |--------------|--------|--------------------------|----------------------------------------------------------------------------------------| | scrollSpeed | number | 40 | The speed at which scrolling occurs | | containerRef | Ref | document.documentElement | A ref to the container. If a ref is not provided then it scrolls the entire document. | ## Returns | Property | Type | Description | |-----------------|---------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------| | scrollToElement | (ref: MutableRefObject<.HTMLElement>, verticalOffset: number) => undefined | Use this method to scroll to an element with a given ref leaving `verticalOffset` pixels between element and the top of the container/document. | | scrollToY | (y: number) => undefined | Use this method to scroll to a `y` position in the container/document. | You can destructure these properties as follows: ```javascript const { scrollToElement, scrollToY } = useScroll(); ``` # useScrollSequence Hook The `useScrollSequence` hook can be used to scroll through a sequence of elements using methods such as `next` and `previous`. You can scroll within a container or the entire document. ## Usage ```javascript import { useScrollSequence } from 'react-scroll-hooks'; const Component = () => { const containerRef = React.useRef(); const { createScrollRef, next, previous, goToPosition, active } = useScrollSequence({ initialActive: 2, verticalOffset: 100, scrollSpeed: 50, containerRef }); return (

...

Position 0

Position 1

Position 2

) } ``` **Note**: The container in which scrolling occurs requires the following CSS properties to work as expected: ```css position: relative; overflow: scroll; ``` ## Props The hook takes an **object** as a parameter with the following properties: | Parameter | Type | Default | Description | |----------------|--------|--------------------------|-------------------------------------------------------------------------------------------| | initialActive | number | -1 | The index of the initial active element. This will scroll to the element on first render. | | verticalOffset | number | 0 | The space between the top of the container/document and the element being scrolled to. | | scrollSpeed | number | 40 | The speed at which scrolling occurs. | | containerRef | Ref | document.documentElement | A ref to the container. If a ref is not provided then it scrolls the entire document. | ## Returns | Property | Type | Description | |-----------------|-----------------------------------------------------------|-----------------------------------------------------------------------------------------------------------| | createScrollRef | () => {ref: MutableRefObject<.HTMLElement>, index: number} | This method returns a ref to attach to an element. And the index the element will be in the scroll order. | | next | () => undefined | Scrolls to the next element in the sequence. | | previous | () => undefined | Scrolls to the previous element in the sequence. | | goToPosition | (index: number) => undefined | Scrolls to the element at the given index in the sequence. | | active | number | The index of the currently active element. | You can destructure these properties as follows: ```javascript const { createScrollRef, next, previous, goToPosition, active } = useScrollSequence(); ```

react-scroll-hooks

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past