👟 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

$3

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

yarn: yarn add react-scroll-to

$3

Render Props:

``jsx
// 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 (

{({ scroll }) => (
scroll({ x: 20, y: 500 })}>Scroll to Bottom
)}

);
}
}
`

`jsx
// Scroll to position (0, 500) within all provided children
import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";

export default class MyComponent extends Component {
render() {
return (

{({ scroll }) => (

scroll({ y: 500, smooth: true })}>
Scroll within this container


)}

);
}
}
`

`jsx
// Scroll to position (0, 500) within a specific child
import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";

export default class MyComponent extends Component {
render() {
return (

{({ scroll }) => (



)}

);
}
}
`

`jsx
// 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 (
<>

{({ scroll }) => (
scroll({ ref: this.myRef, x: 20, y: 500 })}>
Scroll to Bottom

)}




);
}
}
`

Higher Order Component:

`jsx
// 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 props.scroll({ y: 500 })}>Scroll to Bottom;
});
`

`jsx
// Scroll to position (0, 500) within all provided children
import React from "react";
import { ScrollToHOC, ScrollArea } from "react-scroll-to";

export default ScrollToHOC(function(props) {
return (

props.scroll({ y: 500 })}>Scroll to Bottom

);
});
`

`jsx
// Scroll to position (0, 500) within a specific child
import React from "react";
import { ScrollToHOC, ScrollArea } from "react-scroll-to";

export default ScrollToHOC(function(props) {
return (



);
});
`

$3

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

$3

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

`js
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)
})
`

Mixing and matching these options give different results.

- The scrollById function has been deprecated in favor of the id field in scrollTo

$3

Some browsers don't natively support smooth scroll. Checkout adding a polyfill like smoothscroll-polyfill to fix the issue.

npm install smoothscroll-polyfill`

Contributors

Thanks goes to these wonderful people (emoji key):

Dylan Paulus 💻 📖

Anthony Ng 💻 📖

UmenR 💻

Yi Wen 💻

Shitanshu Pandey 💻

This project follows the all-contributors specification. Contributions of any kind welcome!