smooth scrolling to react component via reference
npm install react-scroll-to-component#### With npm
``sh`
npm install react-scroll-to-component --save
#### With Yarn
`sh`
yarn add react-scroll-to-component
##### Valid options:
>
###### offset : number
> Add an offset to the final position. if > 0 then page is moved to the bottom otherwise the page is moved to the top.
###### align : string
> Alignment of the element. Can be one of 'top', 'middle' or 'bottom'. Defaulting to 'middle'.1000
###### ease : string
> Easing function defaulting to "out-circ" (view ease for more)
###### duration : number
> Animation duration defaulting to
js
import scrollToComponent from 'react-scroll-to-component';// without options
scrollToComponent(this.refs.name);
//with options
scrollToComponent(this.refs.name, {
offset: 1000,
align: 'top',
duration: 1500
});
`
Demo
js
import React, { Component } from 'react';
import './App.css';
import scrollToComponent from 'react-scroll-to-component';class App extends React.Component {
componentDidMount() {
scrollToComponent(this.Blue, { offset: 0, align: 'middle', duration: 500, ease:'inCirc'});
}
render() {
return (
{ this.Violet = section; }}>Violet
{ this.Indigo = section; }}>Indigo
{ this.Blue = section; }}>Blue
{ this.Green = section; }}>Green
{ this.Yellow = section; }}>Yellow
{ this.Orange = section; }}>Orange
{ this.Red = section; }}>Red
Inspired By Hope with Love and Peace
)
}
}export default App;
``MIT