@studio-freight/react-locomotive-scroll

A locomotive-scroll React wrapper

Usage no npm install needed!

<script type="module">
  import studioFreightReactLocomotiveScroll from 'https://cdn.skypack.dev/@studio-freight/react-locomotive-scroll';
</script>

README


Logo Logo

React Locomotive Scroll

A locomotive-scroll React wrapper
Explore Locomotive Scroll docs »

Report Bug · Request Feature

Table of Contents
  1. Getting Started
  2. Usage
  3. Contributing
  4. License
  5. Contact
  6. Acknowledgements

Getting Started

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

Installation

$ npm install locomotive-scroll react-locomotive-scroll

or using Yarn

$ yarn add locomotive-scroll react-locomotive-scroll

Usage

1. Import the provider

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

2. 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>

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

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

4. Add the base styles to your CSS file.

locomotive-scroll.css

5. 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

Contributing

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

License

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

Contact

Antoine Lin - @vahilloff - contact@antoinelin.com

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

Acknowledgements

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