https://github.com/dolfbarr/react-log-hook

React hook for logging per component lifecycle
https://github.com/dolfbarr/react-log-hook

hook hooks log logger logging mit-license parcel react react-hook react-hooks react-lib react-library react-typescript standardjs standardjs-with-typescript storybook tsdoc typescript typescript-lib typescript-library

Last synced: 6 months ago
JSON representation

React hook for logging per component lifecycle

• Host: GitHub
• URL: https://github.com/dolfbarr/react-log-hook
• Owner: dolfbarr
• License: mit
• Created: 2022-11-26T15:42:55.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-02-15T09:14:51.000Z (9 months ago)
• Last Synced: 2025-04-30T07:09:31.339Z (6 months ago)
• Topics: hook, hooks, log, logger, logging, mit-license, parcel, react, react-hook, react-hooks, react-lib, react-library, react-typescript, standardjs, standardjs-with-typescript, storybook, tsdoc, typescript, typescript-lib, typescript-library
• Language: TypeScript
• Homepage:
• Size: 4.04 MB
• Stars: 42
• Watchers: 2
• Forks: 2
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          


  


  

  


  


  

  

   

  

  

  

  

  


  


  
🪵 React Log Hook

  
 Lightweight & customizable logging hook for your react components lifecycle


  


  By Dolf Barr

  

  


  


  




# 🪵 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

```sh

npm install -D react-log-hook

```

With yarn

```sh

yarn add -D react-log-hook

```

## Usage

### Basic usage

```javascript

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

```javascript

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

- [x] Add previous state checking

- [x] Use object copy to persist in time

- [x] Use console groups to handle all the logs

- [x] Add dev environment support by default

- [x] Polish the looks with component names, function calls, time etc

- [x] 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](LICENSE)