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 }