Rulexec/react-scroll-to-bottom

React container that will auto scroll to bottom

react-scroll-to-bottom

React container that will auto scroll to bottom or top if new content is added and viewport is at the bottom, similar to tail -f. Otherwise, a "jump to bottom" button will be shown to allow user to quickly jump to bottom.

Demo

Try out the demo at https://compulim.github.io/react-scroll-to-bottom/.

Breaking changes

[3.0.0] - 2020-06-21

• scrollToBottom/scrollToEnd/scrollToStart/scrollToTop now accept an option { behavior: 'auto' | 'smooth' }
  • Without the option, it is by default to artificial smooth scrolling (smooth), to keep existing behavior
  • This behavior may change in the future, by defaulting to discrete scrolling (auto), to better align with HTML DOMElement.scrollIntoView standard
  • During the transition, please always pass { behavior: 'smooth' } to keep existing behavior

[2.0.0] - 2020-05-07

• Starting from react-scroll-to-bottom@2, we requires React 16.8.6 or above. This enable developers to use React Hooks to add features to the scroll view.

Sample code

import { css } from 'glamor';
import ScrollToBottom from 'react-scroll-to-bottom';

const ROOT_CSS = css({
  height: 600,
  width: 400
});

export default props =>
  <ScrollToBottom className={ ROOT_CSS }>
    <p>Nostrud nisi duis veniam ex esse laboris consectetur officia et. Velit cillum est veniam culpa magna sit exercitation excepteur consectetur ea proident. Minim pariatur nisi dolore Lorem ipsum adipisicing do. Ea cupidatat Lorem sunt fugiat. Irure est sunt nostrud commodo sint.</p>
    <p>Duis consectetur ad in fugiat et aliquip esse adipisicing occaecat et sunt ea occaecat ad. Tempor anim consequat commodo veniam nostrud sunt deserunt adipisicing Lorem Lorem magna irure. Eu ut ipsum magna nulla sunt duis Lorem officia pariatur. Nostrud nisi anim nostrud ea est do nostrud cupidatat occaecat dolor labore do anim. Laborum quis veniam ipsum ullamco voluptate sit ea qui adipisicing aliqua sunt dolor nulla. Nulla consequat sunt qui amet. Pariatur esse pariatur veniam non fugiat laboris eu nulla incididunt.</p>
    <p>Laboris duis do consectetur aliquip non aliquip ad ad quis minim. Aute magna tempor occaecat magna fugiat culpa. Commodo id eiusmod ea pariatur consequat fugiat minim est anim. Ipsum amet ipsum eu nisi. Exercitation minim amet incididunt tempor do ut id in officia eu sit est. Dolor qui laboris laboris tempor sunt velit eiusmod non ipsum exercitation ut sint ipsum officia.</p>
  </ScrollToBottom>

We use glamor for component styles. It is not required, but we don't support style props for performance reason.

Props

Name	Type	Default	Description
checkInterval	number	150	Recurring interval of stickiness check, in milliseconds (minimum is 17 ms)
className	string		Set the class name for the root element
debounce	number	17	Set the debounce for tracking the onScroll event
followButtonClassName	string		Set the class name for the follow button
mode	string	"bottom"	Set it to "bottom" for scroll-to-bottom, "top" for scroll-to-top
scrollViewClassName	string		Set the class name for the container element that house all props.children

Hooks

You can use React Hooks to perform various operations and signal state changes. The component which use the hook must stay under <ScrollToBottom> or <Composer>.

Category	Name	Type	Description
Function	useScrollTo	() => (scrollTop: number | '100%') => void	Scroll panel to specified position
Function	useScrollToBottom	() => () => void	Scroll panel to bottom
Function	useScrollToEnd	() => () => void	Scroll panel to end (depends on mode)
Function	useScrollToStart	() => () => void	Scroll panel to start (depends on mode)
Function	useScrollToTop	() => () => void	Scroll panel to top
State	useAnimating	() => [boolean]	true if the panel is animating scroll effect
State	useAtBottom	() => [boolean]	true if the panel is currently near bottom
State	useAtEnd	() => [boolean]	true if the panel is currently near the end (depends on mode)
State	useAtStart	() => [boolean]	true if the panel is currently near the start (depends on mode)
State	useAtTop	() => [boolean]	true if the panel is currently near top
State	useMode	() => [string]	"bottom" for scroll-to-bottom, "top" for scroll-to-top
State	useSticky	() => [boolean]	true if the panel is sticking to the end

Sample code

The following sample code will put a button inside the content view only if the view is not at the bottom. When the button is clicked, it will scroll the view to the bottom.

Note: useScrollToBottom can only be called inside components hosted under <ScrollToBottom>.

import ScrollToBottom, { useScrollToBottom, useSticky } from 'react-scroll-to-bottom';

const Content = () => {
  const scrollToBottom = useScrollToBottom();
  const [sticky] = useSticky();

  return (
    <React.Fragment>
      <p>Labore commodo consectetur commodo et Lorem mollit voluptate velit adipisicing proident sit. Dolor consequat nostrud aliquip ea anim enim. Culpa quis tempor et quis esse proident cupidatat reprehenderit laborum ullamco.</p>
      <p>Incididunt labore nulla cupidatat occaecat elit esse occaecat culpa irure et nisi excepteur. Duis Lorem labore consectetur nostrud et voluptate culpa consequat enim reprehenderit. Id voluptate occaecat anim consequat id ea eiusmod laborum proident irure veniam esse. Aliquip nostrud culpa nostrud laborum cillum adipisicing dolore. Est tempor labore Lorem ad cupidatat reprehenderit exercitation pariatur officia ex adipisicing cupidatat exercitation.</p>
      <p>Est labore cupidatat exercitation est laboris et tempor Lorem irure velit ea commodo sint officia. Ullamco exercitation cillum est fugiat do. Enim qui eu veniam nostrud tempor elit. Duis elit mollit ut reprehenderit sit adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint dolor proident commodo proident non cupidatat labore.</p>
      { !sticky && <button onClick={ scrollToBottom }>Click me to scroll to bottom</button> }
    </React.Fragment>
  );
}

export default () => (
  <ScrollToBottom>
    <Content />
  </ScrollToBottom>
)

Context

Starting with React Hooks, we are deprecating the React Context.

We use 2 different contexts with different performance characteristics to provide better overall performance. Function context contains immutable functions. State context may change when the user scroll the panel.

Function context

This context contains functions used to manipulate the container. And will not update throughout the lifetime of the composer.

Name	Type	Description
useObserveScrollPosition	(observer: (({ scrollTop: number }) => void) | false) => void	Observe scroll position change by passing a callback function
useScrollTo	(scrollTop: number | '100%') => void	Scroll panel to specified position
useScrollToBottom	() => void	Scroll panel to bottom
useScrollToEnd	() => void	Scroll panel to end (depends on mode)
useScrollToStart	() => void	Scroll panel to start (depends on mode)
useScrollToTop	() => void	Scroll panel to top

Callback function passed to useObserveScrollPosition will be called rapidly during scrolling. To unsubscribe, pass a falsy value.

State context

This context contains state of the container.

Name	Type	Description
useAnimating	boolean	true if the panel is animating scroll effect
useAnimatingToEnd	boolean	true if the panel is animating scroll effect and towards the end (depends on mode)
useAtBottom	boolean	true if the panel is currently near bottom
useAtEnd	boolean	true if the panel is currently near the end (depends on mode)
useAtStart	boolean	true if the panel is currently near the start (depends on mode)
useAtTop	boolean	true if the panel is currently near top
useMode	string	"bottom" for scroll-to-bottom, "top" for scroll-to-top
useSticky	boolean	true if the panel is sticking to the end

atEnd and sticky are slightly different. During scroll animation, the panel is not at the end yet, but it is still sticky.

Road map

• Easier customization for "scroll to bottom" button
• Debounce on showing "scroll to bottom" button

Contributions

Like us? Star us.

Want to make it better? File us an issue.

Don't like something you see? Submit a pull request.