https://github.com/oluceps/lenis-solid
Smooth scroll lib Lenis wrapper for SolidJS
https://github.com/oluceps/lenis-solid
Last synced: 12 months ago
JSON representation
Smooth scroll lib Lenis wrapper for SolidJS
- Host: GitHub
- URL: https://github.com/oluceps/lenis-solid
- Owner: oluceps
- License: mit
- Created: 2024-09-17T10:52:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-08T07:38:07.000Z (over 1 year ago)
- Last Synced: 2025-06-27T22:52:24.462Z (12 months ago)
- Language: TypeScript
- Homepage: https://jsr.io/@myrrhlab/lenis-solid
- Size: 35.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# solid-lenis
## Introduction
`solid-lenis` provides a `` component that creates a [Lenis](https://github.com/darkroomengineering/lenis) instance and provides it to its children via context. This allows you to use Lenis in your SolidJS app without manually passing the instance through props. It also includes a `useLenis` hook that lets you access the Lenis instance from any component in your application.
> [!NOTE]
> Functions not fully tested.
## Usage
### Basic
```tsx
import { SolidLenis, useLenis } from 'solid-lenis';
function Layout() {
const lenis = useLenis(({ scroll }) => {
// called on every scroll
});
return (
{/* content */}
);
}
```
## Props
- `options`: [Lenis options](https://github.com/darkroomengineering/lenis#instance-settings).
- `root`: Lenis will be instantiated using `` scroll. Default: `false`.
- `autoRaf`: if `false`, `lenis.raf` needs to be called manually. Default: `true`.
- `rafPriority`: [Tempus](https://github.com/studio-freight/tempus#readme) execution priority. Default: `0`.
- `className`: Class name for the wrapper div. Default: `''`.
## Hooks
Once the Lenis context is set (with components mounted inside ``), you can use the following hook:
### `useLenis`
This hook returns the Lenis instance. It accepts three arguments:
- `callback`: The function to be called on scroll events.
- `deps`: Trigger callback on dependency change.
- `priority`: Manage callback execution order.
## Examples
### GSAP integration (Not fully tested)
```tsx
import { createEffect, onCleanup } from 'solid-js';
import gsap from 'gsap';
function Component() {
let lenisRef;
createEffect(() => {
function update(time) {
lenisRef?.lenis?.raf(time * 1000);
}
gsap.ticker.add(update);
onCleanup(() => {
gsap.ticker.remove(update);
});
});
return (
{/* content */}
);
}
```
Thanks to `lenis-react` and `GPT4o`, referenced and learnt a lot from them.
## License
[The MIT License.](https://opensource.org/licenses/MIT)