mosesoak / react-locomotive-scroll Goto Github PK

A locomotive-scroll React wrapper
Explore Locomotive Scroll docs »

Report Bug · Request Feature

To get a local copy up and running follow these simple steps.

$ npm install locomotive-scroll react-locomotive-scroll

or using Yarn

$ yarn add locomotive-scroll react-locomotive-scroll

Import the provider

import { LocomotiveScrollProvider } from 'react-locomotive-scroll'

Wrap your application using the provider

const containerRef = useRef(null)

<LocomotiveScrollProvider
  options={
    {
      smooth: true,
      // ... all available Locomotive Scroll instance options 
    }
  }
  watch={
    [
      //...all the dependencies you want to watch to update the scroll
    ]
  }
  containerRef={containerRef}
>
  <main data-scroll-container ref={containerRef}>
    {/* ...your app */}
  </main>
</LocomotiveScrollProvider>

Wrap your pages using data-scroll-section to prevent weird behaviours

export function Page() {
  return (
    <div data-scroll-section>
      {/* ...your page */}
    </div>
  )
}

Get the scroll instance through all your components

import { useLocomotiveScroll } from 'react-locomotive-scroll'

export function Component() {
  const { scroll } = useLocomotiveScroll()

  // ... your component
}

At this time you should be able to do whatever your want using the scroll object.

For more examples and to use Locomotive Scroll, please refer to their Documentation

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.

Antoine Lin - @vahilloff - [email protected]

Project Link: https://github.com/toinelin/react-locomotive-scroll

Please feel free to open a pull request to add your project to the list!