React Hook which tells you when you've scrolled to bottom
Uses IntersectionObserver so make sure you can support it.
npm install --save use-scroll-to-bottomThe hook returns a tuple of two things:
- A RefCallback which needs to go on the last element of your scrolling container.
- A boolean value which tells you whether bottom has been reached or not.
import React from 'react';
import {useScrollToBottom} from 'use-scroll-to-bottom'
export default function MyComponent() {
// isBottom will be true when bottom is reached
// add setBottomRef to the last element in your scrolling container
const [setBottomRef, isBottom] = useScrollToBottom();
return (
<div className="simple-container">
<div className="big-element">
{isBottom && "Bottom reached"}
</div>
<div ref={setBottomRef}>Bottom</div>
</div>
)
}MIT © tudorgergely