https://github.com/finnfiddle/react-scroll-area
React component that scrolls to child refs programmatically
https://github.com/finnfiddle/react-scroll-area
Last synced: 6 months ago
JSON representation
React component that scrolls to child refs programmatically
- Host: GitHub
- URL: https://github.com/finnfiddle/react-scroll-area
- Owner: finnfiddle
- License: mit
- Created: 2016-07-18T20:53:32.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-18T20:54:57.000Z (almost 10 years ago)
- Last Synced: 2024-10-11T11:17:42.973Z (over 1 year ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Scroll Area
```bash
npm install react-scroll-area
```
A React component that enables you to programmatically scroll to child components within it.
## Example Usage
```javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ScrollArea from 'react-scroll-area';
class MyComponent extends Component {
componentDidMount() {
const scrollarea = ReactDOM.findDOMNode(this.refs.scrollarea);
setTimeout(() => {
scrollarea.scrollTo(this.refs.first_target);
}, 3000);
setTimeout(() => {
scrollarea.scrollTo(this.refs.second_target, {
offsetTop: -100,
offsetLeft: 0,
duration: 2000,
delay: 500,
tick: 50,
});
}, 6000);
}
render() {
return (
First Target
Second Target
);
}
}
```
## Options
Passed as second argument to `scrollTo` method.
| Prop Name | Description | Default Value |
|------------|----------------------------------------------------------------------------|---------------|
| offsetTop | desired vertical offset of scroll container from target at end of scroll | 0 |
| offsetLeft | desired horizontal offset of scroll container from target at end of scroll | 0 |
| duration | duration of scroll | 200 |
| delay | delay before starting to scroll | 0 |
| tick | period between each tick of scroll animation | 30 |
## License
MIT