ReactAutoScrollContainer is a React component designed to automatically scroll to the bottom when new content is added and the user is already at the container's bottom. This feature is especially handy for real-time or dynamic content updates.
npm install react-auto-scroll-containerReactAutoScrollContainer is a React component designed to automatically scroll to the bottom when new content is added and the user is already at the container's bottom. This feature is especially handy for real-time or dynamic content updates.
You can install react-auto-scroll-container using npm:
``bash`
npm i react-auto-scroll-container
!Screen Recording 2024-12-04 at 10 22 25
`jsx
import React from 'react';
import {AutoScrollContainer} from 'react-auto-scroll-container';
const App = () => {
return (
{/ Your dynamic content goes here /}
);
};
export default App;
`
| Prop | Type | Default | Description |
| ----------------------- | -------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| children | React.ReactNode | Required | The content to be displayed within the scroll container |percentageThreshold
| | number | 20 | Defines the percentage of container height from bottom where auto-scrolling triggers. Lower values mean scrolling triggers closer to the bottom |className
| | string | undefined | CSS class name(s) to apply to the container |style
| | CSSProperties | undefined | Inline styles to apply to the container |behavior
| | string | "auto" | Scroll behavior. Can be "auto", "smooth", or "instant" |active
| | boolean | false | When true, enables auto-scrolling when new content is added |forceScroll
| | boolean | false | When true, forces scrolling to bottom regardless of user's scroll position |overflowY
| | "auto" \| "scroll" \| "hidden" \| "visible" \| "inherit" | "auto" | Controls vertical overflow behavior of the container |as
| | React.ElementType | "div" | The HTML element or component to render as the container |
`jsx
import React from 'react';
import {AutoScrollContainer} from 'react-auto-scroll-container';
const App = () => {
return (
{/ Your dynamic content goes here /}
);
};
export default App;
``
This project is licensed under the MIT License - see the LICENSE file for details.