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.
const Layout = () => {
return (
<ReactLenis root options={{ ...options }}>
{/* Your scrollable website */}
</ReactLenis>
)
}
The options
object is passed directly to the Lenis instance, check their readme for reference
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
- /bundled: Generated by
microbundle
after runningbuild:bundled
script. Includes all external dependencies. - /dist: Generated by
microbundle
after runningbuild:dist
script.- /dist/types Generated by
tsc
after runningbuild:types
script.
- /dist/types Generated by
- /docs: Used by
vite
throughdev
script to serve the documentation. - /docs/App.jsx: here's where you can test your library.
- /src: Your library's raw code.
-
@studio-freight/compono Our Next.js/React component library.
-
@studio-freight/satus Our starter kit.
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