👟 React Scroll-To

A React component that makes scrolling easy.

React Scroll-To provides a Higher Order Component, and Render Props implementation.

Example: View React Storybook Examples

Install

npm: npm i react-scroll-to --save

yarn: yarn add react-scroll-to

API

Render Props:

// Scroll to position (20, 500) in the browser window import React, { Component } from "react"; import { ScrollTo } from "react-scroll-to";  export default class MyComponent extends Component {   render() {     return (       <ScrollTo>         {({ scrollTo }) => (           <a onClick={() => scrollTo({ x: 20, y: 500 })}>Scroll to Bottom</a>         )}       </ScrollTo>     );   } }

// Scroll to position (0, 500) within all provided <ScrollArea /> children import React, { Component } from "react"; import { ScrollTo, ScrollArea } from "react-scroll-to";  export default class MyComponent extends Component {   render() {     return (       <ScrollTo>         {({ scrollTo }) => (           <ScrollArea style={{ height: 1000 }}>             <button onClick={() => scrollTo({ y: 500, smooth: true })}>               Scroll within this container             </button>           </ScrollArea>         )}       </ScrollTo>     );   } }

// Scroll to position (0, 500) within a specific <ScrollArea /> child import React, { Component } from "react"; import { ScrollTo, ScrollArea } from "react-scroll-to";  export default class MyComponent extends Component {   render() {     return (       <ScrollTo>         {({ scrollTo }) => (           <div>             <ScrollArea id="foo" style={{ height: 1000 }}>               <button onClick={() => scrollTo({ id: "foo", y: 500 })}>                 Scroll within this container               </button>             </ScrollArea>              <ScrollArea style={{ height: 1000 }}>               This container won't scroll             </ScrollArea>           </div>         )}       </ScrollTo>     );   } }

// Scroll by a component's ref import React, { Component } from "react"; import { ScrollTo } from "react-scroll-to";  export default class MyComponent extends Component {   myRef = React.createRef();    render() {     return (       <>         <ScrollTo>           {({ scrollTo }) => (             <a onClick={() => scrollTo({ ref: this.myRef, x: 20, y: 500 })}>Scroll to Bottom</a>           )}         </ScrollTo>          <div ref={this.myRef}>           My Element         </div>       </>     );   } }

Higher Order Component:

// Scroll to position (0, 500) within the browser window import React from "react"; import { ScrollToHOC } from "react-scroll-to";  export default ScrollToHOC(function(props) {   return <a onClick={() => props.scrollTo({ y: 500 })}>Scroll to Bottom</a>; });

// Scroll to position (0, 500) within all provided <ScrollArea /> children import React from "react"; import { ScrollToHOC, ScrollArea } from "react-scroll-to";  export default ScrollToHOC(function(props) {   return (     <ScrollArea style={{ height: 1000 }}>       <a onClick={() => props.scrollTo({ y: 500 })}>Scroll to Bottom</a>     </ScrollArea>   ); });

// Scroll to position (0, 500) within a specific <ScrollArea /> child import React from "react"; import { ScrollToHOC, ScrollArea } from "react-scroll-to";  export default ScrollToHOC(function(props) {   return (     <div>       <ScrollArea id="foo" style={{ height: 1000 }}>         <a onClick={() => props.scrollTo({ id: "foo", y: 500 })}>Scroll to Bottom</a>       </ScrollArea>        <ScrollArea style={{ height: 1000 }}>         This container won't scroll       </ScrollArea>     </div>   ); });

Types:

Typescript definitions are built in
Flow is currently not support (Open for PRs!)

2.0 Changes

v2.0 has a new API for controlling scrolling. Instead of taking two arguments, x and y, the ScrollTo component now takes an object.

scrollTo({   x: 25 // The horizontal x position to scroll to   y: 10 // The vertical y position to scroll to   id: "myId" // The ID of the ScrollArea we want to scroll   ref: refObj // A reference to a component to scroll   smooth: true // If true, this will animate the scroll to be smooth. False will give an instant scroll. (defaults: false) })