pierrelevaillant/react-lenis

Introduction

react-lenis creates and manages an instance of the Lenis. It takes in a root prop and an options object that is spread into the Lenis constructor.

If root is true, <ReactLenis> will be the root Lenis instance and all other <ReactLenis> components in the app will get the instance from the context. If root is false, the component will create a new Lenis instance and provide it via the context. It's recommended to only have one <ReactLenis root> component in your app.

Usage

const Layout = () => {
  return (
    <ReactLenis root options={{ ...options }}>
      {/* Your scrollable website */}
    </ReactLenis>
  )
}

Options

The options object is passed directly to the Lenis instance, check their readme for reference

Extras

Once the Lenis context is set (components mounted inside <ReactLenis>) you can use these handy hooks:

useLenis is a hook that returns the Lenis instance

The hook takes three argument:

callback: The function to be called whenever a scroll event is emitted
deps array: Trigger callback on change
priority: Manage callback execution order

Folder Structure

/bundled: Generated by microbundle after running build:bundled script. Includes all external dependencies.
/dist: Generated by microbundle after running build:dist script.
- /dist/types Generated by tsc after running build:types script.
/docs: Used by vite through dev script to serve the documentation.
/docs/App.jsx: here's where you can test your library.
/src: Your library's raw code.

@studio-freight/react-lenis in use

@studio-freight/compono Our Next.js/React component library.
@studio-freight/satus Our starter kit.

Authors

This tool is maintained by the Studio Freight Darkroom team:

Clement Roche (@clementroche_) – Studio Freight
Guido Fier (@uido15) – Studio Freight
Leandro Soengas (@lsoengas) - Studio Freight
Franco Arza (@arzafran) - Studio Freight

License

The MIT License.

pierrelevaillant / react-lenis