{"id":17990687,"url":"https://github.com/oluceps/lenis-solid","last_synced_at":"2025-07-01T09:07:16.093Z","repository":{"id":257571406,"uuid":"858680954","full_name":"oluceps/lenis-solid","owner":"oluceps","description":"Smooth scroll lib Lenis wrapper for SolidJS","archived":false,"fork":false,"pushed_at":"2024-10-08T07:38:07.000Z","size":36,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-27T22:52:24.462Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jsr.io/@myrrhlab/lenis-solid","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oluceps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-17T10:52:07.000Z","updated_at":"2024-10-08T07:38:10.000Z","dependencies_parsed_at":"2024-09-18T01:05:06.622Z","dependency_job_id":null,"html_url":"https://github.com/oluceps/lenis-solid","commit_stats":null,"previous_names":["oluceps/lenis-solid"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oluceps/lenis-solid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oluceps%2Flenis-solid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oluceps%2Flenis-solid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oluceps%2Flenis-solid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oluceps%2Flenis-solid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oluceps","download_url":"https://codeload.github.com/oluceps/lenis-solid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oluceps%2Flenis-solid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262933321,"owners_count":23386784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-29T19:18:48.845Z","updated_at":"2025-07-01T09:07:16.062Z","avatar_url":"https://github.com/oluceps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# solid-lenis\n\n## Introduction\n`solid-lenis` provides a `\u003cSolidLenis\u003e` 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.\n\n\u003e [!NOTE]\n\u003e Functions not fully tested.\n\n## Usage\n\n### Basic\n\n```tsx\nimport { SolidLenis, useLenis } from 'solid-lenis';\n\nfunction Layout() {\n  const lenis = useLenis(({ scroll }) =\u003e {\n    // called on every scroll\n  });\n\n  return (\n    \u003cSolidLenis root autoRaf={true}\u003e \n      {/* content */}\n    \u003c/SolidLenis\u003e\n  );\n}\n```\n\n## Props\n- `options`: [Lenis options](https://github.com/darkroomengineering/lenis#instance-settings).\n- `root`: Lenis will be instantiated using `\u003chtml\u003e` scroll. Default: `false`.\n- `autoRaf`: if `false`, `lenis.raf` needs to be called manually. Default: `true`.\n- `rafPriority`: [Tempus](https://github.com/studio-freight/tempus#readme) execution priority. Default: `0`.\n- `className`: Class name for the wrapper div. Default: `''`.\n\n## Hooks\nOnce the Lenis context is set (with components mounted inside `\u003cSolidLenis\u003e`), you can use the following hook:\n\n### `useLenis`\nThis hook returns the Lenis instance. It accepts three arguments:\n- `callback`: The function to be called on scroll events.\n- `deps`: Trigger callback on dependency change.\n- `priority`: Manage callback execution order.\n\n## Examples\n\n### GSAP integration (Not fully tested)\n\n```tsx\nimport { createEffect, onCleanup } from 'solid-js';\nimport gsap from 'gsap';\n\nfunction Component() {\n  let lenisRef;\n\n  createEffect(() =\u003e {\n    function update(time) {\n      lenisRef?.lenis?.raf(time * 1000);\n    }\n\n    gsap.ticker.add(update);\n\n    onCleanup(() =\u003e {\n      gsap.ticker.remove(update);\n    });\n  });\n\n  return (\n    \u003cSolidLenis ref={lenisRef} autoRaf={false}\u003e\n      {/* content */}\n    \u003c/SolidLenis\u003e\n  );\n}\n```\n\nThanks to `lenis-react` and `GPT4o`, referenced and learnt a lot from them.\n\n## License\n\n[The MIT License.](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foluceps%2Flenis-solid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foluceps%2Flenis-solid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foluceps%2Flenis-solid/lists"}