🪵 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.5Kb gzipped
• 🗂️ Typed — made with TypeScript, ships with types
• 🥰 Simple — don't worry about any changes in your props & state
• 🔧 Customizable — work in progress 😉
• 🔬 Tested — up to 100% coverage
• 🏎️ Fast — native react hooks & optimized
• 📭 No dependecies

With npm

npm install react-log-hook

With yarn

yarn add 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 }

• 🎉 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

• 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
• Support 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

MIT License