Skip to content
Automatically scroll an element to the bottom
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
demo Bump acorn from 5.7.3 to 5.7.4 in /demo Mar 14, 2020
src Start with some very basic unit tests. Nov 25, 2019
.babelrc Start with some very basic unit tests. Nov 25, 2019
.eslintrc.js
.gitignore
.prettierrc.js
.stylelintrc.js
LICENSE Add a license and README. Nov 12, 2019
README.md
jest.config.js Start with some very basic unit tests. Nov 25, 2019
package-lock.json
package.json Add a test npm task; add Codecov badge. Nov 25, 2019
tsconfig.json

README.md

@brianmcallister/react-auto-scroll

codecov CircleCI npm version

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

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
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;
  // Show the auto scroll option.
  showOption?: boolean;
}
⇡ Top
You can’t perform that action at this time.