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

    1.1.2 • Public • Published

    react-bottom-scroll

    A simple React component wrapper which automatically scrolls content to the bottom of the wrapper. Also provides callback methods that are triggered on reaching top or bottom of the wrapper. Best suited for chat like application.

    Installation

    npm install react-bottom-scroll

    Upgrade

    npm install react-bottom-scroll@latest

    Usage

    use the component to wrap the content which you want to scroll to the bottom

    import { ScrollWrapper } from "react-botttom-scroll";
    
    const wraperstyle = {
      width: 550,
      height: 550,
      overflowY: "auto",
    };
    
    const topCallback = () => {
      // callback to load new content at the top of the wrapper. eg loading more chat at the top
      console.log("Reached top of container");
    };
    
    const bottomCallback = () => {
      //callback to handle reaching bottom of the page eg. setting read status to true
      console.log("Reached bottom of container");
    };
    
    <ScrollWrapper
      wrapperStyle={wrapperStyle}
      minScroll={100}
      smoothBehavior
      topCallback={topCallback}
      bottomCallback={bottomCallback}
    >
      {content}
    </ScrollWrapper>;

    here contents can be a list of div's or any other html elements.

    Props

    Property Type Default Description
    wrapperStyle object {width:500,height:500,overflowY:'scroll'} CSS properties that will be set on scroll wrapper component. NOTE: CSS should be passed in react style.
    minScroll number null minimum scroll from bottom in pixels that should stop autoscroll to bottom if content is changed.
    smoothBehavior boolean false if smoothBehavior is true scrollBehavior is set to smooth
    topCallback function null callback function that will be triggered once content is scrolled to top of the wrapper. Eg. can be used to load more content on reaching top of the wrapper.
    bottomCallback function null callback function that will be triggered once content is scrolled to bottom of the wrapper. Eg. can be used to set read status of chat to true or false.

    Install

    npm i react-bottom-scroll

    DownloadsWeekly Downloads

    14

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    18.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • deepak-bisht