Gathering detailed insights and metrics for @loggists/logger
A lightweight, type-safe event tracking library for React applications that simplifies analytics integration while maintaining clean code and optimal performance.
Installations
npm install @loggists/loggerDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
22.8.0
NPM Version
10.8.2
Score
61.6
Supply Chain
92.6
Quality
86.1
Maintenance
100
Vulnerability
100
License
Releases
3
Contributors
3
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (97.29%)
JavaScript (2.71%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
647
Last Day
1
Last Week
10
Last Month
86
Last Year
647
GitHub Statistics
61 Stars
66 Commits
2 Forks
2 Watching
15 Branches
3 Contributors
Bundle Size
6.79 kB
Minified
2.23 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.3.2
Package Id
@loggists/logger@0.3.2
Unpacked Size
97.15 kB
Size
17.96 kB
File Count
19
NPM Version
10.8.2
Node Version
22.8.0
Publised On
07 Jan 2025
Total Downloads
Cumulative downloads
Total Downloads
647
Last day
-66.7%
1
Compared to previous day
Last week
-50%
10
Compared to previous week
Last month
-84.7%
86
Compared to previous month
Last year
0%
647
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
24
@cspell/eslint-plugin@eslint-react/eslint-plugin@testing-library/jest-dom@testing-library/react@testing-library/user-event@types/eslint@types/react@typescript-eslint/eslint-plugin@typescript-eslint/parseresbuildeslinteslint-import-resolver-typescripteslint-plugin-importeslint-plugin-react-hookshuskyjsdomlint-stagedprettierreactreact-domrimraftypescripttypescript-eslintvitest
Versions
logger
This package provides a simple integration with your analytics tool(e.g. Google Analytics, Amplitude) designed to handle various types of user events and context management in your React application. It is built with TypeScript, ensuring type safety and ease of integration.
Main Features
- Declarative user event tracking APIs
- Ensures execution order in asynchronous event operations.
- Batching options for efficient and performant data transmission.
- Decouples your React application from analytics tool.
Why logger?
If you're developing a web service with various experiments and iterations, user event tracking and logging is essential. However, logging during frontend development can sometimes be a painful process.
Maybe you have to create a custom hook, integrate your logging logic with your state management logic, and deal with all the hassle, making your code messy and hard to maintain.
logger helps you track events with type-safe declarative APIs, and enhances your logging performance with batching.
Install
Using npm:
1$ npm install @loggists/logger
Using yarn:
1$ yarn add @loggists/logger
Using pnpm:
1$ pnpm add @loggists/logger
Example with react-ga4
logger.ts
1import ReactGA from "react-ga4"; 2import { createLogger } from "@loggists/logger"; 3import { SendParams, EventParams, GAContext, ImpressionParams, PageViewParams } from "./types"; 4 5export const [Log, useLog] = createLogger<GAContext, SendParams, EventParams, ImpressionParams, PageViewParams>({ 6 init: () => { 7 ReactGA.initialize("(your-ga-id)"); 8 }, 9 DOMEvents: { 10 onClick: (params, context) => { 11 ReactGA.event({ 12 ...params, 13 ...context, 14 action: "click", 15 }); 16 }, 17 }, 18 impression: { 19 onImpression: (params, context) => { 20 ReactGA.event({ 21 ...params, 22 ...context, 23 action: "impression", 24 }); 25 }, 26 }, 27 pageView: { 28 onView: ({ page }) => { 29 ReactGA.send({ 30 hitType: "pageview", 31 page, 32 }); 33 }, 34 }, 35}); 36
App.tsx
1import { useState } from "react"; 2import { Log } from "./logger"; 3 4function App() { 5 const [count, setCount] = useState(0); 6 7 return ( 8 <Log.Provider 9 initialContext={{ userId: "USERID", clientId: "CLIENTID" }} 10 > 11 <h1>Logger</h1> 12 <div className="card"> 13 <Log.Click 14 params={{ category: "button", label: "count", value: count + 1 }} 15 > 16 <button onClick={() => setCount((count) => count + 1)} > 17 count is {count} 18 </button> 19 </Log.Click> 20 </div> 21 <Log.Impression 22 params={{ category: "text", label: "Good morning" }} 23 > 24 <div>Good morning</div> 25 </Log.Impression> 26 <Log.PageView params={{page: "/home"}} /> 27 </Log.Provider> 28 ); 29} 30
Docs
No vulnerabilities found.
No security vulnerabilities found.