https://github.com/appthrust/react-hook-observability
https://github.com/appthrust/react-hook-observability
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/appthrust/react-hook-observability
- Owner: appthrust
- License: mit
- Created: 2023-10-13T09:18:19.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-16T08:20:54.000Z (over 2 years ago)
- Last Synced: 2025-04-05T23:32:07.397Z (about 1 year ago)
- Language: TypeScript
- Size: 220 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG/main.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
react-hook-observability
## About
**react-hook-observability** includes multiple libraries that provide Observability as React Hooks in React.
| Library Name | Description | README | NPM |
| :-------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | :--------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [@react-hook-observability/hooks](./packages/hooks/README.md) | Provides Observability as React Hooks in React. | [README](./packages/hooks/README.md) | [](https://www.npmjs.com/package/@react-hook-observability/hooks) |
| [@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) | [](https://www.npmjs.com/package/@react-hook-observability/nextjs-hooks) |
| [@react-hook-observability/nextjs-server-actions](./packages/nextjs-server-actions/README.md) | Provides ServerActions for Next.js. | [README](./packages/nextjs-server-actions/README.md) | [](https://www.npmjs.com/package/@react-hook-observability/nextjs-server-actions) |
## Getting Started
Install the library.
### npm
```bash
npm install @react-hook-observability/hooks
```
### yarn
```bash
yarn add @react-hook-observability/hooks
```
### pnpm
```bash
pnpm add @react-hook-observability/hooks
```
### bun
```bash
bun add @react-hook-observability/hooks
```
## Usage
### useBrowserEventSpans + useClientConsoleExporter
```tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
// 1. Setup Interactor and return following properties.
// - watchRef: tag ref
// - spans: trace spans
// - resetSpans: reset trace spans
const { watchRef, spans, resetSpans } = useBrowserEventSpans({
eventKinds: ["click"],
batchConfig: {
scheduledDelayMillis: 100,
},
});
// 2. Setup Exporter. In this case, useClientConsoleExporter.
useClientConsoleExporter({ spans, resetSpans, intervalDuration: 100 });
// 3. Rendering html tag with watchRef.
return (
{children}
);
}
```
## Contributing
see [CONTRIBUTING.md](./CONTRIBUTING.md)