Menu Close

React hook for logging per component lifecycle

React hook for logging per component lifecycle
React Log Hook Screenshot

NPM Version
License
minzipped size
dependency count
Build Status
Last Commit

🪵 React Log Hook
Lightweight & customizable logging hook for your react components lifecycle

🪵 react-log-hook

React hook for logging per component lifecycle

Features

  • 🪶 Lightweight — under 1.5 kB gzipped & minified
  • 🗂️ Typed — made with TypeScript, shipped with types
  • 🥰 Simple — don’t worry about any changes in your props & state
  • 🔧 Customizable — able to change everything you see in the logs
  • 🔬 Tested — up to 💯% unit test coverage
  • 🏎️ Fast — native react hooks & optimized
  • 📭 No dependecies

Install

With npm

npm install -D react-log-hook

With yarn

yarn add -D react-log-hook

Usage

Basic usage

import { useLog } from 'react-log-hook' const App = () => { // Add a logger const { log } = useLog() const [state, setState] = useState(null) // Log the changes via console in real time! log(state) return null }

Configuration options

import { useLog } from 'react-log-hook' const App = () => { // Any configuration properties are optional const { log } = useLog({ environments: [ /** Contains array of environments of `process.env.NODE_ENV` in which logging will be allowed */ 'dev', 'development', ], // Print Options styles: { /** Contains styles object with different CSS inline styles used in logging */ componentCSS: 'color: DodgerBlue' /** Inline css for rendering component name in the logs */, changeCSS: 'color: green; font-weight: bold;' /** Inline css for rendering current value in the logs */, subValueCSS: 'color: SlateGray; font-weight: thin;' /** Inline css for rendering any additional data like time or previous value in the logs */, }, printer: console /** Contains custom implementation of console */, logLevel: 'log' /** Level of logging defined by console method */, /** Render object or array inline or via interactive browser renderer */ inline: true, isGroupingEnabled: true /** Enable grouping for logs */, isGroupCollapsed: false /** Render groups collapsed */, groupLabelRenderer: ( /** A function which will be used to render labels for the group */ type /** Current stage of component lifecycle: 'Mount' | 'Change' | 'Unmount' */, componentName, ) => `${type}${componentName}`, // Custom Render Function render: function ({ /** Custom function which will be used for rendering the result, provided with useful data */ value, prevValue, type /** Current stage of component lifecycle: 'Mount' | 'Change' | 'Unmount' */, componentName, inline /** Render object or array inline or via interactive browser renderer */, flags: { isGrouped /** Enable grouping for logs */, isCollapsed /** Render groups collapsed */, }, }) { console.log(value) }, }) const [state, setState] = useState(null) // It's possible to redefine any configuration option per log call! log(state, { inline: false, logLevel: 'warn', }) return null }

FAQ

Will it deep copy the value to make sure it will persist in the logs?

  • 🎉 Yes, 🪵 react-log-hook deep copies the value to make sure it will not be changed in the logs later

Do i need to install @types/react-log-hook as well?

  • 💪 No, 🪵 react-log-hook comes with prebundled types

Will it run in production evironment?

  • By default 🪵 react-log-hook will run only in dev or development node evironments defined by NODE_ENV

Roadmap

  • Add previous state checking
  • Use object copy to persist in time
  • Use console groups to handle all the logs
  • Add dev environment support by default
  • Polish the looks with component names, function calls, time etc
  • Add more customization options
  • Test with SSR & Server components

Contributing

  • 🌟 Stars & 📥 Pull Requests are welcome for sure! ❤️

Development

🪵 react-log-hook uses npm & npm scripts in development, the following scipts can be handy:

npm run start:demo

Starts a demo app with enabled hook to check it in real environment

npm run storybook

Starts storybook with example components to test against

npm run release:check

Combination of linting, type-checking & tests; runs as precommit hook

License

MIT License

View Source Code
Posted in React, React.js, ReactJs