{"id":13450447,"url":"https://github.com/kmkzt/react-hooks-visible","last_synced_at":"2026-01-12T06:48:40.780Z","repository":{"id":34907173,"uuid":"188860692","full_name":"kmkzt/react-hooks-visible","owner":"kmkzt","description":"React Hooks library for element visibility. Uses the intersection observer API.","archived":false,"fork":false,"pushed_at":"2025-03-20T05:12:04.000Z","size":1057,"stargazers_count":29,"open_issues_count":33,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-20T15:58:57.641Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://kmkzt.github.io/react-hooks-visible/","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/kmkzt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-05-27T14:40:55.000Z","updated_at":"2023-03-11T12:21:13.000Z","dependencies_parsed_at":"2023-01-15T10:15:57.242Z","dependency_job_id":"85e9a332-4dbb-4a35-8051-21bcc322e7c1","html_url":"https://github.com/kmkzt/react-hooks-visible","commit_stats":{"total_commits":31,"total_committers":4,"mean_commits":7.75,"dds":"0.32258064516129037","last_synced_commit":"de8746aff7598d4e76e010a791fe65f62faa8c38"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kmkzt%2Freact-hooks-visible","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kmkzt%2Freact-hooks-visible/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kmkzt%2Freact-hooks-visible/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kmkzt%2Freact-hooks-visible/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kmkzt","download_url":"https://codeload.github.com/kmkzt/react-hooks-visible/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245130767,"owners_count":20565707,"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-07-31T07:00:34.721Z","updated_at":"2026-01-12T06:48:40.774Z","avatar_url":"https://github.com/kmkzt.png","language":"TypeScript","funding_links":[],"categories":["Packages","React Hooks"],"sub_categories":["React Components"],"readme":"# react-hooks-visible\n\n[![npm version](https://badge.fury.io/js/react-hooks-visible.svg)](https://badge.fury.io/js/react-hooks-visible.svg) ![npm](https://img.shields.io/npm/dt/react-hooks-visible.svg)\n\n`react-hooks-visible` is React Hooks library for element visibility. Uses the intersection observer API.\n\n**[demo](https://kmkzt.github.io/react-hooks-visible/)**\n\n## Get started\n\n```shell\nyarn add react react-hooks-visible\n```\n\n## How to use\n\nstarted\n\n```javascript\nimport React from 'react'\nimport { useVisible } from 'react-hooks-visible'\n\nconst VisibleComponent = () =\u003e {\n  const [targetRef, visible] = useVisible()\n  return (\n    \u003cdiv ref={targetRef}\u003eThis is {Math.floor(visible * 100)} % visible \u003c/div\u003e\n  )\n}\n```\n\nPass a function to an argument, and you can change the return value\n\n```javascript\n// Percent value.\nconst [targetRef, percent] = useVisible((vi: number) =\u003e Math.floor(vi * 100))\n\n// Boolean. This example is 50% visible.\nconst [targetRef, isVisible] = useVisible((vi: number) =\u003e vi \u003e 0.5)\n\n// CSSProperties. opacity\nconst [styleExampleRef, visibleStyle] = useVisible((vi: number) =\u003e ({\n  opacity: vi\n}))\n```\n\n### Options.\n\nThis is same as IntersectionObserver Option.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer\n\n```javascript\nconst [targetRef, visible] = useVisble(Math.floor(visible * 100),{\n  root: document.querySelector('wrapper') // Wrap element\n  rootMargin: '10px', //wrap element margin\n  threshold: [0.1, 0.2, 0.3, 0.4]\n})\n```\n\n[example code](src/example/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkmkzt%2Freact-hooks-visible","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkmkzt%2Freact-hooks-visible","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkmkzt%2Freact-hooks-visible/lists"}