Skip to content

React hook for logging per component lifecycle

License

Notifications You must be signed in to change notification settings

dolfbarr/react-log-hook

Repository files navigation

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