{"id":26146075,"url":"https://github.com/psparwez/react-smooth-scrolll","last_synced_at":"2026-04-18T20:02:21.415Z","repository":{"id":279233395,"uuid":"938138972","full_name":"psparwez/react-smooth-scrolll","owner":"psparwez","description":"A lightweight React component for smooth scrolling using Lenis, compatible with React \u0026 Next.js. ✔️","archived":false,"fork":false,"pushed_at":"2025-12-18T20:33:01.000Z","size":174,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-21T21:58:32.037Z","etag":null,"topics":["javascript","npm","react","react-smooth-scroll","react-smooth-scrolll","smooth-scrolling","typescript"],"latest_commit_sha":null,"homepage":"https://react-smooth-scrolll.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/psparwez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-24T13:37:46.000Z","updated_at":"2025-12-18T20:33:01.000Z","dependencies_parsed_at":"2025-02-24T14:41:27.592Z","dependency_job_id":"cbeb2d60-bb3c-440f-8a18-f18ca016aac9","html_url":"https://github.com/psparwez/react-smooth-scrolll","commit_stats":null,"previous_names":["psparwez/react-smooth-scrolll"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/psparwez/react-smooth-scrolll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psparwez%2Freact-smooth-scrolll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psparwez%2Freact-smooth-scrolll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psparwez%2Freact-smooth-scrolll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psparwez%2Freact-smooth-scrolll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/psparwez","download_url":"https://codeload.github.com/psparwez/react-smooth-scrolll/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psparwez%2Freact-smooth-scrolll/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31982755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T17:30:12.329Z","status":"ssl_error","status_checked_at":"2026-04-18T17:29:59.069Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","npm","react","react-smooth-scroll","react-smooth-scrolll","smooth-scrolling","typescript"],"created_at":"2025-03-11T04:59:57.723Z","updated_at":"2026-04-18T20:02:21.373Z","avatar_url":"https://github.com/psparwez.png","language":"TypeScript","readme":"# react-smooth-scrolll\n\nA lightweight and configurable smooth scrolling component for React and Next.js, powered by [Lenis](https://github.com/studio-freight/lenis).\n\n## Features\n- Smooth scrolling with customizable speed and easing\n- Supports React and Next.js\n- Configurable props for scrolll behavior\n- Optimized for performance\n\n## Installation\n\n```sh\nnpm install react-smooth-scrolll\n```\n\nor\n\n```sh\nyarn add react-smooth-scrolll\n```\n\n## Usage\n\n### **Basic Example**\n\n\u003cp\u003e\n  \u003cimg src=\"https://skillicons.dev/icons?i=react\" alt=\"Next.js icon\" width=\"24\" height=\"24\" style=\"vertical-align: middle; margin-right: 8px;\"\u003e\n \u003cstrong \u003eIn React\u003c/strong\u003e\n\u003c/p\u003e\n\n```tsx\nimport { SmoothScroll } from \"react-smooth-scrolll\";\n\nconst App = () =\u003e {\n    return (\n        \u003cSmoothScroll\u003e\n            \u003cdiv style={{ height: \"200vh\", padding: \"50px\" }}\u003e\n                \u003ch1\u003eWelcome to Smooth Scrolling!\u003c/h1\u003e\n            \u003c/div\u003e\n        \u003c/SmoothScroll\u003e\n    );\n};\n\nexport default App;\n```\n\u003cp\u003e\n  \u003cimg src=\"https://skillicons.dev/icons?i=nextjs\" alt=\"Next.js icon\" width=\"24\" height=\"24\" style=\"vertical-align: middle; margin-right: 8px;\"\u003e\n \u003cstrong \u003e Best Practice in Next.js\u003c/strong\u003e\n\u003c/p\u003e\n\n1. Create a folder `utils/ScrollSmooth.tsx` or `providers/SmoothScroll.tsx`.\n2. Inside this file, paste the following code:\n\n```tsx\n\"use client\";\nimport { SmoothScroll } from \"react-smooth-scrolll\";\n\nconst SmoothScrollProvider = ({ children }: { children: React.ReactNode }) =\u003e {\n    return \u003cSmoothScroll\u003e{children}\u003c/SmoothScroll\u003e;\n};\n\nexport default SmoothScrollProvider;\n```\n\n3. Then, go to `app/page.tsx` and wrap your content:\n\n```tsx\nimport SmoothScrollProvider from \"@/providers/SmoothScroll\";\n\nexport default function Home() {\n  return (\n    \u003cSmoothScrollProvider\u003e\n      \u003ch1\u003eHome Page!\u003c/h1\u003e\n    \u003c/SmoothScrollProvider\u003e\n  );\n}\n```\n\n### Customizing Scroll Behavior\n\nYou can override default settings using props:\n\n```tsx\n\u003cSmoothScroll scrollSpeed={2} smoothness={0.1} infinite={true} /\u003e\n```\n\n### Available Props\n\n| Prop           | Type    | Default | Description |\n|---------------|--------|---------|-------------|\n| `scrollSpeed` | number | `1.5`   | Adjusts wheel scroll sensitivity  |\n| `infinite`    | boolean | `false` | Enables infinite scroll looping |\n| `smoothness`  | number | `0.07`  | Linear interpolation (smoothness) intensity (between 0 and 1) |\n| `options`     | object  | `{}`    | Additional Lenis options |\n\n## API\n\n### `useSmoothScroll()`\nA custom hook to access the `Lenis` instance for advanced controls.\n\n```tsx\nimport { useSmoothScroll } from \"react-smooth-scrolll\";\n\nconst Component = () =\u003e {\n    const lenis = useSmoothScroll();\n\n    return (\n        \u003cbutton onClick={() =\u003e lenis?.scrollTo(500)}\u003e\n            Scroll to 500px\n        \u003c/button\u003e\n    );\n};\n```\n\n## Testing\n\nThis package includes unit tests using Vitest and React Testing Library. Run tests with:\n\n```sh\nnpm run test\n```\n\n## License\n\nMIT\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsparwez%2Freact-smooth-scrolll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpsparwez%2Freact-smooth-scrolll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsparwez%2Freact-smooth-scrolll/lists"}