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.
You can install react-auto-scroll-container
using npm:
npm i react-auto-scroll-container
import React from 'react';
import {AutoScrollContainer} from 'react-auto-scroll-container';
const App = () => {
return (
<AutoScrollContainer percentageThreshold={10} style={{/* Your inline styles goes here */}} className="Your css classes goes here">
{/* Your dynamic content goes here */}
</AutoScrollContainer>
);
};
export default App;
-
children
(React.ReactNode
): The content that will be wrapped by the AutoScrollContainer. -
percentageThreshold
(number
): The threshold (in percentage) for triggering automatic scrolling when the user is near the top of the container. For example, a value of10
would trigger scrolling when the user has scrolled to 90% of the container. -
className
(string
, optional): Additional CSS class names to apply to the AutoScrollContainer component. -
style
(CSSProperties
, optional): Additional inline styles to apply to the AutoScrollContainer component. -
behavior
(string
, optional): Custom scrolling behavior for the container. This should be a valid CSSscroll-behavior
value (e.g.,"auto"
,"smooth"
).
This project is licensed under the MIT License - see the LICENSE file for details.