react-auto-scroll-container

react-auto-scroll-container

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.

Installation

You can install react-auto-scroll-container using npm:

npm i react-auto-scroll-container

Example

StackBlitz

Usage

import React from 'react';
import {AutoScrollContainer} from 'react-auto-scroll-container';

const App = () => {
  return (
    <AutoScrollContainer active={true} percentageThreshold={10} style={{/* Your inline styles goes here */}} className="Your css classes goes here">
      {/* Your dynamic content goes here */}
    </AutoScrollContainer>
  );
};

export default App;

Props

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

Example Usage with Props

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;

License

This project is licensed under the MIT License - see the LICENSE file for details.