@studio-freight/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.

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.