react-lenis provides a <ReactLenis>
component that creates a Lenis instance and provides it to its children via context. This allows you to use Lenis in your React app without worrying about passing the instance down through props. It also provides a useLenis
hook that allows you to access the Lenis instance from any component in your app.
For npm users:
npm i @studio-freight/react-lenis
For yarn users:
yarn add @studio-freight/react-lenis
import { ReactLenis, useLenis } from '@studio-freight/react-lenis'
function Layout() {
const lenis = useLenis(({ scroll }) => {
// called every scroll
})
return (
<ReactLenis root>
{ /* content */ }
</ReactLenis>
)
}
options
: Lenis options.root
: Lenis will be instanciate using<html>
scroll. Default:false
.autoRaf
: iffalse
,lenis.raf
needs to be called manually. Default:true
.rAFpriority
: Tempus execution priority. Default:0
.
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 emitteddeps
: Trigger callback on changepriority
: Manage callback execution order
GSAP integration
function Component() {
const lenisRef = useRef()
useEffect(() => {
function update(time) {
lenisRef.current?.raf(time * 1000)
}
gsap.ticker.add(update)
return () => {
gsap.ticker.remove(update)
}
})
return (
<ReactLenis ref={lenisRef} autoRaf={false}>
{ /* content */ }
</ReactLenis>
)
}
- /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