{"id":27021715,"url":"https://github.com/mciccale/use-visibility-on-scroll-up","last_synced_at":"2026-05-07T08:38:26.077Z","repository":{"id":210887194,"uuid":"727681035","full_name":"mciccale/use-visibility-on-scroll-up","owner":"mciccale","description":"Toggle the visibility on scroll of elements in your React app easily.","archived":false,"fork":false,"pushed_at":"2023-12-05T11:10:55.000Z","size":64,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-12-05T12:27:27.243Z","etag":null,"topics":["hooks","react","visibility"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-visibility-on-scroll-up","language":"JavaScript","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/mciccale.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}},"created_at":"2023-12-05T11:05:20.000Z","updated_at":"2023-12-05T12:27:33.806Z","dependencies_parsed_at":"2023-12-05T12:27:30.762Z","dependency_job_id":"f64d1a4d-68f8-4257-8f59-7f1dc587d9c1","html_url":"https://github.com/mciccale/use-visibility-on-scroll-up","commit_stats":null,"previous_names":["mciccale/use-visibility-on-scroll-up"],"tags_count":1,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mciccale%2Fuse-visibility-on-scroll-up","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mciccale%2Fuse-visibility-on-scroll-up/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mciccale%2Fuse-visibility-on-scroll-up/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mciccale%2Fuse-visibility-on-scroll-up/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mciccale","download_url":"https://codeload.github.com/mciccale/use-visibility-on-scroll-up/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242607,"owners_count":20907128,"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":["hooks","react","visibility"],"created_at":"2025-04-04T19:52:07.403Z","updated_at":"2026-05-07T08:38:26.047Z","avatar_url":"https://github.com/mciccale.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-visibility-on-scroll-up\n\nToggle the visibility on scroll of elements in your **React** app easily.\n\nWhen scrolling down, hide the element. When scrolling up, show the element.\n\n## Features\n\n- This **hook** provides an easy way to consult whether an element should be **visible** when **scrolling up and down**.\n- You can also access the lastScroll of the user.\n- **Next.js** ready out of the box.\n\n## Installation\n\n```shell\nnpm install use-visibility-on-scroll-up\n# or\npnpm add use-visibility-on-scroll-up\n# or\nyarn add use-visibility-on-scroll-up\n```\n\n## Usage\n\nThe hook can be imported as follows:\n\n```jsx\n/*\n * Navbar.jsx\n */\n\nimport { useVisibilityOnScrollUp } from 'use-visibility-on-scroll-up';\n\n// ...\n\nconst { visible, lastScroll } = useVisibilityOnScrollUp();\n```\n\n## Example\n\n**Navbar Example using TailwindCSS**\n\n```jsx\nimport { useVisibilityOnScrollUp } from 'use-visibility-on-scroll-up';\n\nexport default function Navbar() {\n  const { visible, lastScroll } = useVisibilityOnScrollUp();\n\n  // Show element if it's visible or the lastScroll was 0 (top of the page)\n\n  return (\n    \u003cheader\n      className={`fixed top-0 w-full bg-white px-8 opacity-90 shadow-lg ${\n        visible || lastScroll === 0 ? 'visible' : 'hidden'\n      }`}\n    \u003e\n      \u003cnav className=\"mx-auto my-4 max-w-2xl\"\u003e\n        \u003cul className=\"flex items-center justify-between\"\u003e\n          \u003cNavbarItem label=\"Home\" path=\"/\" /\u003e\n          \u003cNavbarItem label=\"About Me\" path=\"/about\" /\u003e\n          \u003cNavbarItem label=\"Posts\" path=\"/posts\" /\u003e\n        \u003c/ul\u003e\n      \u003c/nav\u003e\n    \u003c/header\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmciccale%2Fuse-visibility-on-scroll-up","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmciccale%2Fuse-visibility-on-scroll-up","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmciccale%2Fuse-visibility-on-scroll-up/lists"}