react-auto-scroll-container
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

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

Screen Recording 2024-12-04 at 10 22 25

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.

Package Sidebar

Install

npm i react-auto-scroll-container

Weekly Downloads

209

Version

0.2.1

License

MIT

Unpacked Size

19.5 kB

Total Files

15

Last publish

Collaborators

  • failury