react-chat-bottom-pin

This is a fork of react-bottom-scroll

Installation

1npm install react-chat-bottom-pin

Upgrade

1npm install react-chat-bottom-pin@latest

Usage

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

1import { ScrollWrapper } from "react-chat-bottom-pin";
2import "react-chat-bottom-pin/dist/styles.css";
3
4const topCallback = () => {
5  // callback to load new content at the top of the wrapper. eg loading more chat at the top
6  console.log("Reached top of container");
7};
8
9const bottomCallback = () => {
10  //callback to handle reaching bottom of the page eg. setting read status to true
11  console.log("Reached bottom of container");
12};
13
14<ScrollWrapper
15  minScroll={100}
16  smoothBehavior
17  topCallback={topCallback}
18  bottomCallback={bottomCallback}
19>
20  {content}
21</ScrollWrapper>;

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

Props

Property	Type	Default	Description
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.