https://github.com/icd2k3/react-scroll-into-view-if-needed
A thin react component wrapper bundled with scroll-into-view-if-needed
https://github.com/icd2k3/react-scroll-into-view-if-needed
auto-scroll ponyfill react scroll scroll-into-view scroll-into-view-if-needed scrolling smooth
Last synced: 12 months ago
JSON representation
A thin react component wrapper bundled with scroll-into-view-if-needed
- Host: GitHub
- URL: https://github.com/icd2k3/react-scroll-into-view-if-needed
- Owner: icd2k3
- License: mit
- Created: 2018-04-17T21:24:47.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:28:40.000Z (over 3 years ago)
- Last Synced: 2025-07-20T02:53:11.020Z (12 months ago)
- Topics: auto-scroll, ponyfill, react, scroll, scroll-into-view, scroll-into-view-if-needed, scrolling, smooth
- Language: JavaScript
- Homepage: https://codesandbox.io/s/3j4qjp7yp
- Size: 1.49 MB
- Stars: 33
- Watchers: 2
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/icd2k3/react-scroll-into-view-if-needed)
[](https://coveralls.io/github/icd2k3/react-scroll-into-view-if-needed)
A thin react component wrapper bundled with the fantastic [scroll-into-view-if-needed](https://www.npmjs.com/package/scroll-into-view-if-needed) [ponyfill](https://ponyfill.com).
## Install
`yarn add react-scroll-into-view-if-needed`
or
`npm install react-scroll-into-view-if-needed --save`
## Usage
```js
import ScrollIntoViewIfNeeded from 'react-scroll-into-view-if-needed';
const MyComponent = () => (
Hello
);
```
## Props
Each prop is described in detail below, but for a quicker reference - check out the [propTypes](https://github.com/icd2k3/react-scroll-into-view-if-needed/blob/master/src/index.js#L7-L42) object in src.
#### options
> Type: `object`
> Default: `{ behavior: 'smooth', scrollMode: 'if-needed' }`
Full list of options are described [here](https://www.npmjs.com/package/scroll-into-view-if-needed#options)
```js
Hello
```
#### active
> Type: `boolean`
> Default: `true`
The `active` prop allows controll of _when_ to scroll to the component. By default, it will attempt to scroll as soon as it is mounted, but you can set this prop to manually control when to trigger the scroll behavior from the parent component.
```js
class Example extends React.PureComponent {
constructor(props) {
super(props);
this.state = { active: false };
}
handleScrollToggle = () => this.setState({ active: !this.state.active });
render() {
const { active } = this.state;
return (
Scroll
Hello
);
}
}
```
#### elementType
> Type: `string`
> Default: `'div'`
Set the wrapper component type. For example, this could also be `'footer'`, `'button'`, etc... See the React [createElement](https://reactjs.org/docs/react-api.html#createelement) api.
```js
Hello
```
#### className, id, etc
You can also pass normal element attributes like `className` to the component.
```js
Hello
```
## Standalone Version
The standalone version does **not** come bundled with [scroll-into-view-if-needed](https://www.npmjs.com/package/scroll-into-view-if-needed). Use this version if you'd like to maintain your own dependency, or if you're already using [scroll-into-view-if-needed](https://www.npmjs.com/package/scroll-into-view-if-needed) in other areas of your project.
**ES version:**
`import ScrollIntoViewIfNeeded from 'react-scroll-into-view-if-needed/dist/es/standalone.js'`
**UMD version:**
`import ScrollIntoViewIfNeeded from 'react-scroll-into-view-if-needed/dist/umd/standalone.js'`
## Upgrading from v1
This project has been updated along with [scroll-into-view-if-needed](https://www.npmjs.com/package/scroll-into-view-if-needed) and accepts the same `options`. Check out the [migration guide](https://www.npmjs.com/package/scroll-into-view-if-needed#breaking-api-changes-from-v1) over there!