react-pre-hooksuseScrollThreshold
Returns a boolean state that indicates if the user has passed a specified scroll threshold.
Parameters
- It can be:
- a custom scroll event handler that returns a
booleanwhich indicates if the user has passed the threshold or not. - or an object that has the scroll offset
top,bottom,left, andrightvalues.
INFO
If you specified a custom scroll threshold handler, the offset values will not work.
- the target element reference (default is
window).
Return Values
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the target element reference. |
| passed | Boolean | indicates if the user has passed the threshold. |
Example Usage
- Using a custom handler:
tsx
import { useScrollThreshold } from 'react-pre-hooks';
export default function Example() {
const { passed } = useScrollThreshold(() => {
return window.scrollY > 650;
});
return (
<main>
<p>Scroll down..</p>
<div className={passed ? 'show' : ''}>You've reached the end!</div>
</main>
);
}import { useScrollThreshold } from 'react-pre-hooks';
export default function Example() {
const { passed } = useScrollThreshold(() => {
return window.scrollY > 650;
});
return (
<main>
<p>Scroll down..</p>
<div className={passed ? 'show' : ''}>You've reached the end!</div>
</main>
);
}- Using the offset values:
tsx
import { useScrollThreshold } from 'react-pre-hooks';
export default function Example() {
const { passed } = useScrollThreshold({ bottom: 200 });
return (
<main>
<p>Scroll down..</p>
<div className={passed ? 'show' : ''}>You've reached the end!</div>
</main>
);
}import { useScrollThreshold } from 'react-pre-hooks';
export default function Example() {
const { passed } = useScrollThreshold({ bottom: 200 });
return (
<main>
<p>Scroll down..</p>
<div className={passed ? 'show' : ''}>You've reached the end!</div>
</main>
);
}