πͺ΅ React Log Hook
Lightweight & customizable logging hook for your react components lifecycle
By Dolf Barr
React hook for logging per component lifecycle
- πͺΆ 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
With npm
npm install -D react-log-hook
With yarn
yarn add -D react-log-hook
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
}
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
ordevelopment
node evironments defined byNODE_ENV
- 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
- π Stars & π₯ Pull Requests are welcome for sure! β€οΈ
πͺ΅ react-log-hook uses npm & npm scripts in development, the following scipts can be handy:
Starts a demo app with enabled hook to check it in real environment
Starts storybook with example components to test against
Combination of linting, type-checking & tests; runs as precommit hook