@brianmcallister/react-auto-scroll

Automatically scroll an element to the bottom

react-auto-scroll is a React component that automatically scrolls a containing element to the bottom.

Table of contents

• Demo
• Installation
• Usage
• API
  • AutoScroll

Demo

Hosted demo: https://react-auto-scroll.netlify.com/

You can also run the demo locally. To get started:

git clone git@github.com:brianmcallister/react-auto-scroll.git
cd react-auto-scroll/demo
npm i
# Optionally link libraries for local development
npm link @brianmcallister/react-auto-scroll
npm link ../node_modules/react
npm start

⇡ Top

Installation

npm install @brianmcallister/react-auto-scroll

⇡ Top

Usage

import AutoScroll from '@brianmcallister/react-auto-scroll';

const MyComponent = ({ someContent }) => (
  <AutoScroll>
    {someContent}
  </AutoScroll>
);

⇡ Top

API

AutoScroll

This is the default export. Use this React component to scroll a container to the bottom when the children change.

interface Props {
  // ID attribute of the checkbox.
  checkBoxId?: string;
  // Children to render in the scroll container.
  children: React.ReactNode;
  // Extra CSS class names.
  className?: string;
  // Height value of the scroll container.
  height?: number;
  // Text to use for the auto scroll option.
  optionText?: string;
  // Prevent all mouse interaction with the scroll conatiner.
  preventInteraction?: boolean;
    // Ability to disable the smooth scrolling behavior.
  scrollBehavior?: 'smooth' | 'auto';
  // Show the auto scroll option.
  showOption?: boolean;
}

⇡ Top