{"id":16298884,"url":"https://github.com/smakss/react-scroll-direction","last_synced_at":"2026-02-01T05:15:40.031Z","repository":{"id":62126847,"uuid":"558069728","full_name":"SMAKSS/react-scroll-direction","owner":"SMAKSS","description":"Detect scroll direction in react applications. ","archived":false,"fork":false,"pushed_at":"2024-10-02T17:51:37.000Z","size":620,"stargazers_count":25,"open_issues_count":5,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-02T02:32:27.798Z","etag":null,"topics":["hacktoberfest","hooks","react","react-scroll","scroll-direction","scrolling"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@smakss/react-scroll-direction","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/SMAKSS.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2022-10-26T20:52:58.000Z","updated_at":"2024-10-28T17:06:21.000Z","dependencies_parsed_at":"2023-02-18T09:15:17.981Z","dependency_job_id":"b2c3542e-2280-44cf-9486-67d2590654d1","html_url":"https://github.com/SMAKSS/react-scroll-direction","commit_stats":{"total_commits":33,"total_committers":3,"mean_commits":11.0,"dds":0.4545454545454546,"last_synced_commit":"355a4a4dde67b077c4f7818ddc6a698f690b9369"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SMAKSS%2Freact-scroll-direction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SMAKSS%2Freact-scroll-direction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SMAKSS%2Freact-scroll-direction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SMAKSS%2Freact-scroll-direction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SMAKSS","download_url":"https://codeload.github.com/SMAKSS/react-scroll-direction/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246777832,"owners_count":20832032,"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":["hacktoberfest","hooks","react","react-scroll","scroll-direction","scrolling"],"created_at":"2024-10-10T20:45:49.852Z","updated_at":"2026-02-01T05:15:40.025Z","avatar_url":"https://github.com/SMAKSS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Scroll Direction Hook\n\n![npm](https://img.shields.io/npm/v/@smakss/react-scroll-direction)\n![NPM](https://img.shields.io/npm/l/@smakss/react-scroll-direction)\n![npm](https://img.shields.io/npm/dt/@smakss/react-scroll-direction)\n![install size](https://img.shields.io/npm/unpacked-size/%40smakss%2Freact-scroll-direction)\n\n`@smakss/react-scroll-direction` is a versatile, lightweight React hook that not\nonly detects the scroll direction but also provides the scroll position in your\napplication with ease. This enhanced functionality includes detecting distances\nfrom the top, bottom, left, and right edges of the viewport, making it an ideal\nsolution for advanced scroll-based interactions in your React applications.\n\nOriginally inspired by a\n[popular StackOverflow response](https://stackoverflow.com/a/62497293/11908502),\nthis package has evolved into a comprehensive tool for managing scroll detection\nin React applications.\n\n## Demo\n\nExperience the extended capabilities of `@smakss/react-scroll-direction` on\nCodeSandbox:\n\n[![View @smakss/search](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-scroll-direction-tclwvp?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Installation\n\nInstall `@smakss/react-scroll-direction` via npm, yarn, or pnpm:\n\n```bash\nnpm install @smakss/react-scroll-direction\n# or\nyarn add @smakss/react-scroll-direction\n# or\npnpm add @smakss/react-scroll-direction\n```\n\nThen, import it into your project:\n\nES Module:\n\n```js\nimport useDetectScroll from '@smakss/react-scroll-direction'\n```\n\nFor TypeScript projects, import the hook and its types:\n\n```ts\nimport useDetectScroll, {Axis, Direction} from '@smakss/react-scroll-direction'\n```\n\n## Usage\n\nThe `useDetectScroll` hook takes an options object with the following\nproperties:\n\n- `target`: The target scrollable element from which to detect scroll direction\n  and position (default: `window`, must be an `HTMLDivElement`).\n- `thr`: Threshold for scroll direction change detection (default: `0`, accepts\n  only positive values).\n- `axis`: Defines the scroll axis (`\"y\"` or `\"x\"`, default: `\"y\"`).\n- `scrollUp`: Value returned when scrolling up (y-axis) or left (x-axis)\n  (default: `\"up\"` for y-axis, `\"left\"` for x-axis).\n- `scrollDown`: Value returned when scrolling down (y-axis) or right (x-axis)\n  (default: `\"down\"` for y-axis, `\"right\"` for x-axis).\n- `still`: Value returned when there's no scrolling activity (default:\n  `\"still\"`).\n\nThe hook returns an object with two properties:\n\n- `scrollDir`: Indicates the scroll direction (`\"up\"`, `\"down\"`, `\"left\"`,\n  `\"right\"`, or `\"still\"`).\n- `scrollPosition`: An object containing distances from the top, bottom, left,\n  and right edges of the viewport.\n\n## Examples\n\nTo detect both scroll direction and position:\n\n```js\nconst {scrollDir, scrollPosition} = useDetectScroll()\n\n// scrollDir: \"up\", \"down\", \"left\", \"right\", or \"still\"\n// scrollPosition: { top, bottom, left, right }\n```\n\nTo customize for horizontal scroll:\n\n```js\nconst {scrollDir, scrollPosition} = useDetectScroll({axis: Axis.X})\n\n// scrollDir: \"left\", \"right\", or \"still\"\n// scrollPosition: { top, bottom, left, right }\n```\n\nTo use a custom scrollable element as a target rather than the default window:\n\n```js\nconst customElementRef = useRef\u003cHTMLDivElement\u003e(null);\nconst [customElement, setCustomElement] = useState\u003cHTMLDivElement\u003e();\n\nconst scrollDir = useDetectScroll({target: customElement});\n\nuseEffect(() =\u003e {\n    if(customElementRef.current) {\n        setHomepageElement(customElementRef.current);\n    }\n}, [customElementRef])\n```\n\n## Contributing\n\nInterested in making contributions to this project? Please see\n[CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines and details.\n\n## Code of Conduct\n\nWe value and prioritize the well-being of all our contributors and users. To\nensure that this project remains a welcoming space for everyone, please refer to\nour [Code of Conduct](./CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmakss%2Freact-scroll-direction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmakss%2Freact-scroll-direction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmakss%2Freact-scroll-direction/lists"}