react-scroll-id v1.0.8

react-scroll-id

This package is a used to scroll up and down to the exact component in the application

Install

npm install --save react-scroll-id

Example

LINK - Codesandbox

Usage

Function Component

import React from 'react'
import SectionScrollable ,{ScrollTo} from 'react-scroll-id'
const App = () =>{
  return (
    <SectionScrollable>
      <button onClick={()=>{ScrollTo({targetId:'exampleId',behavior:'auto'})}}>Click Me</button>
      <div id={'exampleId'}></div>
    </SectionScrollable>
  )
}

Class Component

import React, { Component } from 'react'
import SectionScrollable ,{ScrollTo} from 'react-scroll-id'
class Example extends Component {
  render() {
     return (
    <SectionScrollable>
      <button onClick={()=>{ScrollTo({targetId:'exampleId'})}}>Move to Container 1</button>
      <button onClick={()=>{ScrollTo({targetId:'containerId'})}}>Move Away</button>
      <div id={'exampleId'}>Container 1</div>
       <div id={'containerId'}>Away from the container</div>
    </SectionScrollable>
  )
  }
}

License

MIT © Yaswanth L(https://github.com/Yaswanth L)