{"id":22392233,"url":"https://github.com/idimetrix/use-element-on-screen","last_synced_at":"2025-07-31T09:31:43.619Z","repository":{"id":257800674,"uuid":"863223634","full_name":"idimetrix/use-element-on-screen","owner":"idimetrix","description":"`use-element-on-screen` is a React hook that tracks the visibility of an element within the viewport. It uses the Intersection Observer API to detect when an element enters or leaves the screen, enabling you to trigger animations, lazy loading, or other actions based on the element's visibility.","archived":false,"fork":false,"pushed_at":"2024-09-25T23:50:54.000Z","size":67,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-08T04:09:41.280Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-element-on-screen","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/idimetrix.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-25T23:47:40.000Z","updated_at":"2024-10-26T00:18:56.000Z","dependencies_parsed_at":"2024-09-26T05:38:25.181Z","dependency_job_id":null,"html_url":"https://github.com/idimetrix/use-element-on-screen","commit_stats":null,"previous_names":["idimetrix/use-element-on-screen"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idimetrix%2Fuse-element-on-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idimetrix%2Fuse-element-on-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idimetrix%2Fuse-element-on-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idimetrix%2Fuse-element-on-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idimetrix","download_url":"https://codeload.github.com/idimetrix/use-element-on-screen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228230822,"owners_count":17888708,"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-12-05T04:15:51.687Z","updated_at":"2024-12-05T04:15:52.252Z","avatar_url":"https://github.com/idimetrix.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **use-element-on-screen**\n\n`use-element-on-screen` is a React hook that tracks the visibility of an element within the viewport. It uses the Intersection Observer API to detect when an element enters or leaves the screen, enabling you to trigger animations, lazy loading, or other actions based on the element's visibility.\n\n## Installation\n\nYou can install the package using **npm**, **yarn**, or **pnpm**.\n\n```bash\npnpm add use-element-on-screen\n\nyarn install use-element-on-screen\n\nnpm install use-element-on-screen\n```\n\n## Usage\n\n```tsx\nimport { textSimilarity } from \"use-element-on-screen\";\n\nconst similarity1 = textSimilarity(\"hello world\", \"hello\", 2); // Default parameters (substring length: 2, case insensitive)\nconsole.log(similarity1);\n\nconst similarity2 = textSimilarity(\"JavaScript\", \"javascript\", 2, true); // Comparison is case-sensitive and the strings differ in case\nconsole.log(similarity2);\n\nconst similarity3 = textSimilarity(\"apple pie\", \"apple\", 3); // Substring length of 3, ignoring case by default\nconsole.log(similarity3);\n```\n\n## tsup\n\nBundle your TypeScript library with no config, powered by esbuild.\n\nhttps://tsup.egoist.dev/\n\n## How to use this\n\n1. install dependencies\n\n```\n# pnpm\n$ pnpm install\n\n# yarn\n$ yarn install\n\n# npm\n$ npm install\n```\n\n2. Add your code to `src`\n3. Add export statement to `src/index.ts`\n4. Test build command to build `src`.\n   Once the command works properly, you will see `dist` folder.\n\n```zsh\n# pnpm\n$ pnpm run build\n\n# yarn\n$ yarn run build\n\n# npm\n$ npm run build\n```\n\n5. Publish your package\n\n```zsh\n$ npm publish\n```\n\n## test package\n\nhttps://www.npmjs.com/package/use-element-on-screen\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidimetrix%2Fuse-element-on-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidimetrix%2Fuse-element-on-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidimetrix%2Fuse-element-on-screen/lists"}