react-bottom-scroll v1.1.2

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