A type safe React hook to handle scroll actions
const divRef = React.useRef<HTMLDivElement>(null);
const scrollTo = useScrollTo(divRef);
return (
<div>
<div onClick={scrollTo} style={{ height: '500px' }} />
<div style={{ height: '500px' }} />
<div style={{ height: '500px' }} />
<div ref={divRef} />
</div>
);
Options is an object with flowing props: behavior
, minus
and plus
.
behavior
have two options: auto
and smooth
, if this property has not been declared, it will be smooth
by default.
minus
and plus
: are the number of pixels that must be added or reduced when the scroll is performed on the element.
All these properties are optional
.
const divRef = React.useRef<HTMLDivElement>(null);
const scrollToPlus = useScrollTo(divRef, { behavior: 'auto', plus: 100 });
const scrollToMinus = useScrollTo(divRef, { behavior: 'auto', minus: 100 });