@brianmcallister/react-auto-scroll
Automatically scroll an element to the bottom
react-auto-scroll is a React component that automatically scrolls a containing element to the bottom.
Table of contents
Demo
Hosted demo: https://react-auto-scroll.netlify.com/
You can also run the demo locally. To get started:
git clone [email protected]:brianmcallister/react-auto-scroll.git
cd react-auto-scroll/demo
npm i
# Optionally link libraries for local development
npm link @brianmcallister/react-auto-scroll
npm link ../node_modules/react
npm start⇡ Top
Installation
npm install @brianmcallister/react-auto-scroll⇡ Top
Usage
import AutoScroll from '@brianmcallister/react-auto-scroll';
const MyComponent = ({ someContent }) => (
<AutoScroll>
{someContent}
</AutoScroll>
);⇡ Top
API
AutoScroll
This is the default export. Use this React component to scroll a container to the bottom when the children change.
interface Props {
// ID attribute of the checkbox.
checkBoxId?: string;
// Children to render in the scroll container.
children: React.ReactNode;
// Extra CSS class names.
className?: string;
// Height value of the scroll container.
height?: number;
// Text to use for the auto scroll option.
optionText?: string;
// Prevent all mouse interaction with the scroll conatiner.
preventInteraction?: boolean;
// Ability to disable the smooth scrolling behavior.
scrollBehavior?: 'smooth' | 'auto';
// Show the auto scroll option.
showOption?: boolean;
}