[](https://github.com/ron0115/react-smooth-scroll-hook/blob/master/LICENSE) [


The useSmoothScroll hook finish smooth scroll behaviour in react component by requestAnimationFrame.
> Storybook Docs are Here.
- 🚀 You don't need to warn about compatibility, it use requsetAnimationFrame api to finish smooth scroll behaviour.
- 👉 Provide direction option ,you can set x for horizontal, y for vertical.
- 💧 No Third Party dependencies, light and pure.
``sh`
npm install react-smooth-scroll-hook
`tsx
import React, { useRef } from 'react';
import useSmoothScroll from 'react-smooth-scroll-hook';
export const Demo = () => {
// A custom scroll container
const ref = useRef(null);
// Also support document.body / document.documentElement, and you don't need to set a ref passing to jsx
const ref = useRef(document.body);
const { scrollTo } = useSmoothScroll({
ref,
speed: 100,
direction: 'y',
});
return (
<>
}>
item-{i}
$3
- ref:
RefObject, container which set as overflow: scroll, if scroll whole document, pass ref = useRef(document.documentElement) or useRef(document.body).
- speed: Distance in one frame to move in requestAnimationFrame mode, defaults to 100, if not provide, speed depends on native API scrollTo.
- direction: Scroll direction, x for horizontal or y for vertical.
- threshold: Judge scroll is finished has an error range, .defaults to 1.#### Returns of Hook
- scrollTo
(string|number) => void - Pass
number: the distance to scroll, e.g. scrollTo(400)
- Pass string: the element seletor you want to scrollTo, meanwhile passing to document.querySelector, e.g. scrollTo('#your-dom-id')- reachedTop
boolean: Whether it has reached the top of refContainer- reachedBottom
boolean: Whether it has reached the bottom of refContainer- scrollToPage
(number) => void: Pass page(number), which scroll to a distance as multiples of container size(offsetWidth/offsetHeight)
.e.g scrollToPage(1),scrollToPage(-1)- refreshState
() => void: Manually refresh the state of reachTop and reachBottom, possibly useful in some situation.- refreshSize
() => void: Manually refresh the size of ref container, possibly useful in some situation.$3
useScrollWatch
Proviede a
list of dom like below, and pass the parent container ref to hook, it return the scrollbar current state of scrollTop, curIndex, curItem.$3
`tsx
import React, { useRef } from 'react';
import { useScrollWatch } from 'react-smooth-scroll-hook';
export const ScrollConatainerMode = () => {
const ref = useRef(null);
const { scrollTop, curIndex, curItem } = useScrollWatch({
ref,
list: [
{
href: '#item-0',
},
{
href: '#item-10',
},
{
href: '#item-20',
},
],
});
return (
<>
Scroll Container Mode
scrollTop: {scrollTop}
curIndex: {curIndex}
curHref: {curItem?.href}
style={{
padding: '10px',
maxHeight: '200px',
overflowY: 'scroll',
}}
ref={ref}
>
{Array(100)
.fill(null)
.map((_item, i) => (
item-${i}}>
item-{i}
))}
$3
- list
Array({href, offset}): href is elemet selector string, which passing to querySelector, such as #element-id
- ref: the same as ref of useSmoothScroll$3
- scrollTop
number: current scrollTop of scroll container.
- curIndex number: current Index of list
- curItem {href, offset}`: current Item of list