https://github.com/ganderzz/react-scroll-to
Scroll to a position in React
https://github.com/ganderzz/react-scroll-to
javascript react scrolling smooth-scrolling
Last synced: 3 months ago
JSON representation
Scroll to a position in React
- Host: GitHub
- URL: https://github.com/ganderzz/react-scroll-to
- Owner: ganderzz
- License: mit
- Created: 2017-11-16T05:10:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-09-30T01:12:36.000Z (over 5 years ago)
- Last Synced: 2025-10-08T19:55:47.286Z (6 months ago)
- Topics: javascript, react, scrolling, smooth-scrolling
- Language: TypeScript
- Homepage: https://ganderzz.github.io/react-scroll-to
- Size: 3.63 MB
- Stars: 357
- Watchers: 2
- Forks: 20
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
👟 React Scroll-To
[](https://circleci.com/gh/ganderzz/react-scroll-to/tree/master)
[](https://coveralls.io/github/ganderzz/react-scroll-to?branch=feature%2Fcreate-circi-artifact)
[](#contributors-)
[](http://makeapullrequest.com)
A React component that makes scrolling easy.
React Scroll-To provides a Higher Order Component, and Render Props implementation.
**Example:** [View React Storybook Examples](https://ganderzz.github.io/react-scroll-to/)
### Install
**npm:** `npm i react-scroll-to --save`
**yarn:** `yarn add react-scroll-to`
### API
**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 }) => (
scroll({ id: "foo", y: 500 })}>
Scroll within this container
This container won't 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
)}
My Element
>
);
}
}
```
**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 (
);
});
```
### 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.
```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`
### Smooth Scrolling Not Working?
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](https://github.com/kentcdodds/all-contributors#emoji-key)):
Dylan Paulus
💻 📖
Anthony Ng
💻 📖
UmenR
💻
Yi Wen
💻
Shitanshu Pandey
💻
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!