pierrelevaillant / react-lenis

Lenis react wrapper

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bibliotheca

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


Authors

This tool is maintained by the Studio Freight Darkroom team:


License

The MIT License.

About

Lenis react wrapper


Languages

Language:JavaScript 100.0%