React hook for logging per component lifecycle
npm install react-log-hook
With npm
``sh`
npm install -D react-log-hook
With yarn
`sh`
yarn add -D react-log-hook
`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
}
`
`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
}
`
- 🎉 Yes, 🪵 react-log-hook deep copies the value to make sure it will not be changed in the logs later
- 💪 No, 🪵 react-log-hook comes with prebundled types
- ✅ By default 🪵 react-log-hook will run only in dev or development node evironments defined by NODE_ENV
- [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
- 🌟 Stars & 📥 Pull Requests are welcome for sure! ❤️
🪵 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