react-smooth-scroll-hook
v1.3.4
Published
[![GitHub license](https://img.shields.io/github/license/ron0115/react-smooth-scroll-hook?style=flat)](https://github.com/ron0115/react-smooth-scroll-hook/blob/master/LICENSE) [![npm version](http://img.shields.io/npm/v/react-smooth-scroll-hook.svg?style=
Downloads
5,809
Readme
react-smooth-scroll-hook
The useSmoothScroll
hook finish smooth scroll behaviour in react component by requestAnimationFrame
.
Storybook Docs are Here.
Feature
🚀 You don't need to warn about compatibility, it use
requsetAnimationFrame
api to finish smooth scroll behaviour.👉 Provide
direction
option ,you can setx
for horizontal,y
for vertical.💧 No Third Party dependencies, light and pure.
Installation
npm install react-smooth-scroll-hook
useSmoothScroll
Quick Start
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 (
<>
<button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button>
<div
// if use custom scroll container, pass ref
ref={ref}
style={{
overflowY: 'scroll',
maxHeight: '200px',
}}
>
{Array(100)
.fill(null)
.map((_item, i) => (
<div key={i} id={`item-${i}`}>
item-{i}
</div>
))}
</div>
</>
);
};
Props
- ref:
RefObject<HTMLElement>
, container which set asoverflow: scroll
, if scroll whole document, passref = useRef(document.documentElement)
oruseRef(document.body)
. - speed: Distance in one frame to move in
requestAnimationFrame
mode, defaults to100
, if not provide, speed depends on native APIscrollTo
. - direction: Scroll direction,
x
for horizontal ory
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 todocument.querySelector
, e.g.scrollTo('#your-dom-id')
- Pass
reachedTop
boolean
: Whether it has reached the top of refContainerreachedBottom
boolean
: Whether it has reached the bottom of refContainerscrollToPage
(number) => void
: Pass page(number
), which scroll to a distance as multiples of container size(offsetWidth
/offsetHeight
) .e.gscrollToPage(1)
,scrollToPage(-1)
refreshState
() => void
: Manually refresh the state ofreachTop
andreachBottom
, possibly useful in some situation.refreshSize
() => void
: Manually refresh the size of ref container, possibly useful in some situation.
Demo
- CodeSandbox
- Storybook
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
.
Quick Start
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 (
<>
<h2>Scroll Container Mode</h2>
<div>
<p>
<strong>scrollTop:</strong> {scrollTop}
</p>
<p>
<strong>curIndex:</strong> {curIndex}
</p>
<p>
<strong>curHref:</strong> {curItem?.href}
</p>
</div>
<div
style={{
padding: '10px',
maxHeight: '200px',
overflowY: 'scroll',
}}
ref={ref}
>
{Array(100)
.fill(null)
.map((_item, i) => (
<div key={i} id={`item-${i}`}>
item-{i}
</div>
))}
</div>
</>
);
};
Props
- list
Array({href, offset})
:href
is elemet selector string, which passing toquerySelector
, such as#element-id
- ref: the same as ref of
useSmoothScroll
Returns of Hook
- scrollTop
number
: current scrollTop of scroll container. - curIndex
number
: current Index of list - curItem
{href, offset}
: current Item of list
Demo
- CodeSandbox
- Storybook