DEV Community

loading...

React Smooth Scroll Effect

said_mounaim profile image Said Mounaim ・1 min read

React Provider Component to add a smooth scroll effect

Live demo: https://react-smooth-scroll-effect.netlify.app/

Install

npm install --save react-use-smooth-scroll
Enter fullscreen mode Exit fullscreen mode

Usage

import React from 'react'

import { UseEffectScroll } from 'react-use-smooth-scroll'
import 'react-use-smooth-scroll/dist/index.css'

const App = () => {
  return (
    <UseEffectScroll>
      <section className='bgGreen'>
        <h1>Section 1</h1>
      </section>
      <section className='bgOrange'>
        <h1>Section 2</h1>
      </section>
      <section className='bgBlue'>
        <h1>Section 3</h1>
      </section>
      <section className='bgGrey'>
        <h1>Section 4</h1>
      </section>
    </UseEffectScroll>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

Follow Me On Github :
https://github.com/saidMounaim

Discussion (0)

pic
Editor guide