{"id":19184498,"url":"https://github.com/9am/use-spotlight","last_synced_at":"2026-04-19T01:01:59.127Z","repository":{"id":205755858,"uuid":"715002874","full_name":"9am/use-spotlight","owner":"9am","description":"A react hook that generates an animated 'spotlight' follows the active target. 🎙","archived":false,"fork":false,"pushed_at":"2024-01-11T06:28:09.000Z","size":197,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-27T11:19:48.062Z","etag":null,"topics":["active","animation","highlight","hooks","react","spotlight","target"],"latest_commit_sha":null,"homepage":"","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/9am.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":"2023-11-06T09:36:47.000Z","updated_at":"2024-03-22T00:05:43.000Z","dependencies_parsed_at":"2023-11-13T06:27:40.613Z","dependency_job_id":"0f1a24d1-cc36-46f3-a150-637765a8a07d","html_url":"https://github.com/9am/use-spotlight","commit_stats":null,"previous_names":["9am/use-spotlight"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/9am/use-spotlight","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Fuse-spotlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Fuse-spotlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Fuse-spotlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Fuse-spotlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/9am","download_url":"https://codeload.github.com/9am/use-spotlight/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Fuse-spotlight/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31990577,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"ssl_error","status_checked_at":"2026-04-18T20:23:29.375Z","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":["active","animation","highlight","hooks","react","spotlight","target"],"created_at":"2024-11-09T11:07:22.670Z","updated_at":"2026-04-19T01:01:58.736Z","avatar_url":"https://github.com/9am.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/9am/use-spotlight/main/logo.svg\" alt=\"use-spotlight-logo\" width=\"140\" height=\"140\" /\u003e\n    \u003ch1\u003euse-spotlight\u003c/h1\u003e\n\t\u003cp\u003eA react hook that generates an animated 'spotlight' follows the active target. 🎙\u003c/p\u003e\n    \u003cp\u003e\n        \u003ca href=\"https://github.com/9am/use-spotlight/blob/main/LICENSE\"\u003e\n            \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/9am/use-spotlight?style=flat-square\u0026color=success\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://github.com/9am/use-spotlight/actions/workflows/test.yml\"\u003e\n            \u003cimg alt=\"test\" src=\"https://github.com/9am/use-spotlight/actions/workflows/test.yml/badge.svg\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/use-spotlight\"\u003e\n            \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/use-spotlight?style=flat-square\u0026color=orange\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/use-spotlight\"\u003e\n            \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/use-spotlight?style=flat-square\u0026color=blue\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://bundlephobia.com/package/use-spotlight@latest\"\u003e\n            \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/use-spotlight?style=flat-square\"\u003e\n        \u003c/a\u003e\n    \u003c/p\u003e\n\u003c/div\u003e\n\n\n## Features\n\n- 🔦 Generate a 'spotlight' that **follows the size and position** of any active target.\n- 👟 **Auto-updated** after resizing or DOM changing.\n- ⚡️ Options to fit any position between **smooth effect** to **high-efficiency performance**.\n- 🪩 Apply **customized style** to the 'light' easily.\n- 💽 **≈ 2kB** minzipped.\n\n## Demo\n\n\u003cimg src=\"https://github.com/9am/use-spotlight/assets/1435457/ef54d5a7-460e-4396-a6c8-bf39703ed85e\" alt=\"use-spotlight-demo\" width=\"140\" /\u003e\n\nhttps://github.com/9am/use-spotlight/assets/1435457/5b570780-abb7-4df9-9e19-7454eafecce4\n\n### Live demos\n\n|Description|Live demo|\n|:---------:|:-------:|\n| **Basic** | [![Edit basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/basic-dfpl4w?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FtoggleButton.tsx\u0026theme=dark) |\n| **Auto-updated resize** | [![Edit auto-follow-resize](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/auto-follow-resize-8grssc?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FtoggleButton.tsx\u0026theme=dark) |\n| **Auto-updated DOM change** | [![Edit auto-follow-mutation](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/auto-follow-mutation-jjlx8h?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FtoggleButton.tsx\u0026theme=dark) |\n| **Throttle** | [![Edit throttle](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/throttle-tpt53s?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FtoggleButton.tsx\u0026theme=dark) |\n| **Custom light style** | [![Edit custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/custom-style-v6pwq3?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FtoggleButton.tsx\u0026theme=dark) |\n| **Pseudo light** | [![Edit pseudo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/pseudo-pj7zdn?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FtoggleButton.tsx\u0026theme=dark) |\n\n### Use cases\n\n\u003e [!NOTE]\n\u003e\n\u003e - An animated active indicator for a component like `\u003cToggleButton\u003e`, `\u003cTabs\u003e`.\n\u003e - A highlight effect for a self-controlled focused system, like the result list of a `\u003cSearchBar\u003e`.\n\u003e - ...\n\n## Usage\n\n#### Install\n\n```sh\nnpm install use-spotlight\n```\n\n#### JSX\n\n```diff\n+import { useSpotlight } from 'use-spotlight'\n\n () =\u003e {\n     const [active, setActive] = useState(-1)\n     // init hook\n+    const { stage, actor, style } = useSpotlight()\n     return (\n         // set ref for 'stage'\n         \u003cul\n+            ref={stage}\n         \u003e\n             {list.map(({ val }) =\u003e (\n                 \u003cli\n                     onClick={() =\u003e setActive(val)}\n                     // set ref for 'actor'\n+                    ref={val === active ? actor : null}\n                 \u003e\n                     {val}\n                 \u003c/li\u003e\n             ))}\n             // set 'style' to the light\n+            \u003ci style={style} /\u003e\n         \u003c/ul\u003e\n     )\n }\n```\n\n## Documentation\n\n### `useSpotlight( SpotlightOptions? )`\n\n#### Parameters: [`SpotlightOptions`](https://github.com/9am/use-spotlight/blob/main/src/types.ts#L12)\n\n- **`throttleWait`**: The number of milliseconds to throttle invocations to. `default: 0`\n- **`stageBorderEdge`**: With default setting, the 'light' will be positioned relative to the *padding edge* of the 'stage', which will cause an offset if 'stage' has *borders*. Set to `true`, if want to use the *border edge*, which will hurt performance but be more accurate on the position. `default: false`\n- **`stageMutation`**: Enable watching 'stage' `childlist` `subtree` DOM mutation. `default: false`\n- **`lightPseudo`**: `::before` or `::after` to enable pseudo element as 'light'. In this mode, there's no need to insert a 'light' element explicitly. It's useful for case that no extra element wanted under the 'stage'. `default: null`\n\n#### Returns: [`Spotlight`](https://github.com/9am/use-spotlight/blob/main/src/types.ts#L24)\n\n- **`stage`**: The RefCallback which will be assigned to node as container.\n- **`actor`**: The RefCallback which will be assigned to node as target to follow.\n- **`style`**: The CSSProperties for the node 'light'.\n- **`size`**: The offset `[x, y, width, height]` between 'actor' and 'stage'.\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e - **`stageBorderEdge=true`** uses `getComputedStyle()` to calculate the `border` size of 'stage', but it's bad for performance, there're other alternatives to achieve this:\n\u003e   1. Use `outline` instead of `border`.\n\u003e   2. Override the style of 'light': `top: -1 * var(--border-top-size-stage)`, `left: -1 * var(--border-left-size-stage)`\n\u003e - **`stageMutation=true`** add an extra `MutationObserver` to the 'stage', consider using the default setting unless it can not cover some of the cases.\n\n## License\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9am%2Fuse-spotlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F9am%2Fuse-spotlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9am%2Fuse-spotlight/lists"}