{"id":15137888,"url":"https://github.com/appthrust/react-hook-observability","last_synced_at":"2025-04-06T06:44:39.810Z","repository":{"id":200330503,"uuid":"704445232","full_name":"appthrust/react-hook-observability","owner":"appthrust","description":null,"archived":false,"fork":false,"pushed_at":"2023-11-16T08:20:54.000Z","size":225,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-05T23:32:07.397Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/appthrust.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG/main.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-13T09:18:19.000Z","updated_at":"2023-10-27T15:24:05.000Z","dependencies_parsed_at":"2023-11-16T08:28:35.169Z","dependency_job_id":"d5ca4eb6-e985-40b4-b81f-23812b8d958c","html_url":"https://github.com/appthrust/react-hook-observability","commit_stats":null,"previous_names":["appthrust/react-hook-observability"],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appthrust%2Freact-hook-observability","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appthrust%2Freact-hook-observability/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appthrust%2Freact-hook-observability/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appthrust%2Freact-hook-observability/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appthrust","download_url":"https://codeload.github.com/appthrust/react-hook-observability/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445652,"owners_count":20939953,"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-09-26T07:03:20.410Z","updated_at":"2025-04-06T06:44:39.790Z","avatar_url":"https://github.com/appthrust.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n    \u003ch1 align=\"center\"\u003ereact-hook-observability\u003c/h1\u003e\n\u003c/p\u003e\n\n## About\n\n**react-hook-observability** includes multiple libraries that provide Observability as React Hooks in React.\n\n| Library Name                                                                                  | Description                                                                     | README                                               | NPM                                                                                                                                                                                                                 |\n| :-------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | :--------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| [@react-hook-observability/hooks](./packages/hooks/README.md)                                 | Provides Observability as React Hooks in React.                                 | [README](./packages/hooks/README.md)                 | [![npm version](https://img.shields.io/npm/v/@react-hook-observability/hooks.svg?style=for-the-badge\u0026labelColor=000000)](https://www.npmjs.com/package/@react-hook-observability/hooks)                             |\n| [@react-hook-observability/nextjs-hooks](./packages/nextjs-hooks/README.md)                   | Provides Observability as React Hooks in React and this is specific to Next.js. | [README](./packages/nextjs-hooks/README.md)          | [![npm version](https://img.shields.io/npm/v/@react-hook-observability/nextjs-hooks?style=for-the-badge\u0026labelColor=000000)](https://www.npmjs.com/package/@react-hook-observability/nextjs-hooks)                   |\n| [@react-hook-observability/nextjs-server-actions](./packages/nextjs-server-actions/README.md) | Provides ServerActions for Next.js.                                             | [README](./packages/nextjs-server-actions/README.md) | [![npm version](https://img.shields.io/npm/v/@react-hook-observability/nextjs-server-actions?style=for-the-badge\u0026labelColor=000000)](https://www.npmjs.com/package/@react-hook-observability/nextjs-server-actions) |\n\n## Getting Started\n\nInstall the library.\n\n### npm\n\n```bash\nnpm install @react-hook-observability/hooks\n```\n\n### yarn\n\n```bash\nyarn add @react-hook-observability/hooks\n```\n\n### pnpm\n\n```bash\npnpm add @react-hook-observability/hooks\n```\n\n### bun\n\n```bash\nbun add @react-hook-observability/hooks\n```\n\n## Usage\n\n### useBrowserEventSpans + useClientConsoleExporter\n\n```tsx\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  // 1. Setup Interactor and return following properties.\n  // - watchRef: \u003chtml\u003e tag ref\n  // - spans: trace spans\n  // - resetSpans: reset trace spans\n  const { watchRef, spans, resetSpans } = useBrowserEventSpans({\n    eventKinds: [\"click\"],\n    batchConfig: {\n      scheduledDelayMillis: 100,\n    },\n  });\n  // 2. Setup Exporter. In this case, useClientConsoleExporter.\n  useClientConsoleExporter({ spans, resetSpans, intervalDuration: 100 });\n  // 3. Rendering html tag with watchRef.\n  return (\n    \u003chtml lang=\"en\" ref={watchRef}\u003e\n      \u003cbody className={inter.className}\u003e{children}\u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n## Contributing\n\nsee [CONTRIBUTING.md](./CONTRIBUTING.md)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappthrust%2Freact-hook-observability","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappthrust%2Freact-hook-observability","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappthrust%2Freact-hook-observability/lists"}