GitHub - dolfbarr/react-log-hook: React hook for logging per component lifecycle
source link: https://github.com/dolfbarr/react-log-hook
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 — % 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 */,
},
}): void {
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
}
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
ordevelopment
node evironments defined byNODE_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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK