New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

use-chat-scroll

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-chat-scroll

React hook for chat-like scroll behavior

  • 1.0.2
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

use-chat-scroll

by Vytenis Urbonavičius

use-chat-scroll is a React hook for chat-like scroll behavior of HTML elements.

Main features:

  • When scroll is at the bottom of container, it would stay there whenever new data is added.
  • When scrolling up, it provides infinite scroll behavior.

You can use useChatScroll for getting both features or useStickyScroll to only keep scroll at the bottom when new data is added to scrollable HTML element.


Installation

npm install --save use-chat-scroll

Usage

Below examples use TypeScript. However, you can use plain JavaScript as well by skipping type declarations and writing everything else same as in examples.

Typical usage of full chat scroll behavior:

import {useChatScroll} from 'use-chat-scroll'

const YourFunctionalReactComponent: React.FC = (data: any[], loadMoreCb: ILoadMoreCb) => {
  const containerRef = useRef<React.MutableRefObject<HTMLDivElement>>()
  useChatScroll(containerRef, data, loadMoreCb)

  return (
    <div ref={containerRef} style={{height: 100, width: 100, overflow: 'auto'}}>
      {data.map(item => (
        // ...
      ))}
    </div>
  )
}

If you only need to keep scroll at the bottom without infinite scroll behavior:

import {useStickyScroll} from 'use-chat-scroll'

const YourFunctionalReactComponent: React.FC = (data: any[]) => {
  const containerRef = useRef<React.MutableRefObject<HTMLDivElement>>()
  useStickyScroll(containerRef, data)

  return (
    <div ref={containerRef} style={{height: 100, width: 100, overflow: 'auto'}}>
      {data.map(item => (
        // ...
      ))}
    </div>
  )
}

Important!

loadMoreCb is called whenever additional data chunk/page needs to be loaded. It is very important to ensure that this callback does not issue a request if end of data is reached. Otherwise target server will be spammed with multiple useless requests. It is also a responsibility of consumer of the hook to determine what is already loaded and what should be loaded at the moment of calling the callback.

loadMoreCb needs to accept an argument beforeRender. This argument is a callback which should be called immediately after server responds with a new chunk/page of data but before this data is handled by some state management library or React itself.

Supported Configuration

It is possible to customize behavior of useChatScroll. This is done by passing additional object argument when calling the hook:

useChatScroll(ref, data, loadCb, options)

Options is an object with the following structure (below example contains default values). All keys are optional.

const options = {

  /**
   * Options for reverse infinite scroll behavior.
   */
  reverseInfiniteScroll: {

    /**
     * Defines how close to the top user needs to scroll in order to invoke gathering of additional data.
     */
    scrollThreshold: {

      /**
       * Defines how threshold is calculated.
       */
      type: EScrollThresholdType.fraction,

      /**
       * Threshold value.
       */
      value: 0.3,

    },

    /**
     * Defines whether infinite scroll behavior is enabled initially.
     */
    enabled: true,

  },

  /**
   * Options for sticky scroll behavior.
   */
  stickyScroll: {

    /**
     * Defines whether sticky scroll behavior is enabled initially.
     */
    enabled: true.

  },
}

Additional Documentation

You can find more details about the hook in a generated documentation under "./docs" folder of the node module.

Keywords

FAQs

Package last updated on 27 Nov 2020

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc