File tree Expand file tree Collapse file tree 1 file changed +10
-14
lines changed
Expand file tree Collapse file tree 1 file changed +10
-14
lines changed Original file line number Diff line number Diff line change 11# react-smooth-scroll-hook
22
3- This is a hook to control your scrollbar in react component!
4-
5- Basically; ` useSmoothScroll ` hook use ` requestAnimationFrame ` to finish smooth scroll behaviour!
6-
7- If you want to control the ` speed ` of scroll behaviour, it defaults to use ` requestAnimationFrame ` mode.
3+ The ` useSmoothScroll ` hook finish smooth scroll behaviour in react component by ` requestAnimationFrame ` .
84
95** Examples are <a target =" _blank " href =" https://ron0115.best/react-smooth-scroll-hook/?path=/docs/usesmoothscroll--docs#basic " >Here</a >.** (Storybook)
106
@@ -33,6 +29,8 @@ export const Demo = () => {
3329 const ref = useRef <HTMLDivElement >(null );
3430 const { scrollTo } = useSmoothScroll ({
3531 ref ,
32+ speed: 100 ,
33+ direction: ' y' ,
3634 });
3735
3836 return (
@@ -45,15 +43,13 @@ export const Demo = () => {
4543 maxHeight: ' 200px' ,
4644 }}
4745 >
48- <div >
49- { Array (100 )
50- .fill (null )
51- .map ((_item , i ) => (
52- <div key = { i } id = { ` item-${i } ` } >
53- y-{ i }
54- </div >
55- ))}
56- </div >
46+ { Array (100 )
47+ .fill (null )
48+ .map ((_item , i ) => (
49+ <div key = { i } id = { ` item-${i } ` } >
50+ item-{ i }
51+ </div >
52+ ))}
5753 </div >
5854 </>
5955 );
You can’t perform that action at this time.
0 commit comments