🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

react-auto-scroll-container

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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.

0.2.1
latest
Version published
Weekly downloads
290
237.21%
Maintainers
1
Weekly downloads
 
Created

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

PropTypeDefaultDescription
childrenReact.ReactNodeRequiredThe content to be displayed within the scroll container
percentageThresholdnumber20Defines the percentage of container height from bottom where auto-scrolling triggers. Lower values mean scrolling triggers closer to the bottom
classNamestringundefinedCSS class name(s) to apply to the container
styleCSSPropertiesundefinedInline styles to apply to the container
behaviorstring"auto"Scroll behavior. Can be "auto", "smooth", or "instant"
activebooleanfalseWhen true, enables auto-scrolling when new content is added
forceScrollbooleanfalseWhen 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
asReact.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.

FAQs

Package last updated on 04 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts