{"id":20914792,"url":"https://github.com/dolfbarr/react-log-hook","last_synced_at":"2025-04-30T07:09:38.783Z","repository":{"id":65391451,"uuid":"570930611","full_name":"dolfbarr/react-log-hook","owner":"dolfbarr","description":"React hook for logging per component lifecycle","archived":false,"fork":false,"pushed_at":"2025-02-15T09:14:51.000Z","size":4232,"stargazers_count":42,"open_issues_count":6,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-30T07:09:31.339Z","etag":null,"topics":["hook","hooks","log","logger","logging","mit-license","parcel","react","react-hook","react-hooks","react-lib","react-library","react-typescript","standardjs","standardjs-with-typescript","storybook","tsdoc","typescript","typescript-lib","typescript-library"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dolfbarr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-26T15:42:55.000Z","updated_at":"2025-01-30T09:47:30.000Z","dependencies_parsed_at":"2024-12-26T19:16:57.122Z","dependency_job_id":null,"html_url":"https://github.com/dolfbarr/react-log-hook","commit_stats":{"total_commits":83,"total_committers":4,"mean_commits":20.75,"dds":0.09638554216867468,"last_synced_commit":"21b15192d9025a6786de579b402f205da503a4c7"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dolfbarr%2Freact-log-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dolfbarr%2Freact-log-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dolfbarr%2Freact-log-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dolfbarr%2Freact-log-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dolfbarr","download_url":"https://codeload.github.com/dolfbarr/react-log-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251658211,"owners_count":21622822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hook","hooks","log","logger","logging","mit-license","parcel","react","react-hook","react-hooks","react-lib","react-library","react-typescript","standardjs","standardjs-with-typescript","storybook","tsdoc","typescript","typescript-lib","typescript-library"],"created_at":"2024-11-18T16:10:57.995Z","updated_at":"2025-04-30T07:09:38.740Z","avatar_url":"https://github.com/dolfbarr.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./react-log-hook-screenshot.png\" alt=\"React Log Hook Screenshot\" width=400 /\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003c/div\u003e\n  \u003cimg src=\"https://badgen.net/npm/v/react-log-hook\" alt=\"NPM Version\" /\u003e\n   \u003cimg src=\"https://badgen.net/npm/license/react-log-hook\" alt=\"License\" /\u003e\n  \u003cimg src=\"https://badgen.net/bundlephobia/minzip/react-log-hook\" alt=\"minzipped size\"/\u003e\n  \u003cimg src=\"https://badgen.net/bundlephobia/dependency-count/react-log-hook\" alt=\"dependency count\"/\u003e\n  \u003cimg src=\"https://github.com/dolfbarr/react-log-hook/actions/workflows/main.yml/badge.svg\" alt=\"Build Status\" /\u003e\n  \u003cimg src=\"https://badgen.net/github/last-commit/dolfbarr/react-log-hook/main\" alt=\"Last Commit\" /\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003cdiv align=\"center\"\u003e\u003cstrong\u003e🪵 React Log Hook\u003c/strong\u003e\u003c/div\u003e\n  \u003cdiv align=\"center\"\u003e Lightweight \u0026 customizable logging hook for your react components lifecycle\u003c/div\u003e\n\n  \u003cdiv align=\"center\"\u003e\n  \u003csub\u003eBy \u003ca href=\"https://twitter.com/dolfbarr\"\u003eDolf Barr\u003c/a\u003e\u003c/sub\u003e\n  \u003c/div\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n# 🪵 react-log-hook\nReact hook for logging per component lifecycle\n\n## Features\n- 🪶 **Lightweight** — under *1.5 kB* gzipped \u0026 minified\n- 🗂️ **Typed** — made with TypeScript, shipped with types\n- 🥰 **Simple** — don't worry about any changes in your props \u0026 state\n- 🔧 **Customizable** — able to change everything you see in the logs\n- 🔬 **Tested** — up to 💯% unit test coverage\n- 🏎️ **Fast** — native react hooks \u0026 optimized\n- 📭 **No dependecies**\n\n\n\n## Install\n\nWith npm\n\n```sh\nnpm install -D react-log-hook\n```\n\nWith yarn\n\n```sh\nyarn add -D react-log-hook\n```\n\n## Usage\n\n### Basic usage\n\n```javascript\nimport { useLog } from 'react-log-hook'\n\nconst App = () =\u003e {\n  // Add a logger\n  const { log } = useLog()\n\n  const [state, setState] = useState(null)\n\n  // Log the changes via console in real time!\n  log(state)\n\n  return null\n}\n```\n\n### Configuration options\n\n```javascript\nimport { useLog } from 'react-log-hook'\n\nconst App = () =\u003e {\n  // Any configuration properties are optional\n  const { log } = useLog({\n    environments: [\n      /** Contains array of environments of `process.env.NODE_ENV` in which logging will be allowed  */\n      'dev',\n      'development',\n    ],\n\n    // Print Options\n\n    styles: {\n      /** Contains styles object with different CSS inline styles used in logging */\n      componentCSS:\n        'color: DodgerBlue' /** Inline css for rendering component name in the logs */,\n      changeCSS:\n        'color: green; font-weight: bold;' /** Inline css for rendering current value in the logs */,\n      subValueCSS:\n        'color: SlateGray; font-weight: thin;' /** Inline css for rendering any additional data like time or previous value in the logs */,\n    },\n    printer: console /** Contains custom implementation of console */,\n    logLevel: 'log' /** Level of logging defined by console method */,\n    /** Render object or array inline or via interactive browser renderer */\n    inline: true,\n    isGroupingEnabled: true /** Enable grouping for logs  */,\n    isGroupCollapsed: false /** Render groups collapsed  */,\n    groupLabelRenderer: (\n      /** A function which will be used to render labels for the group  */\n      type /** Current stage of component lifecycle: 'Mount' | 'Change' | 'Unmount'  */,\n      componentName,\n    ) =\u003e `${type}${componentName}`,\n\n    // Custom Render Function\n\n    render: function ({\n      /** Custom function which will be used for rendering the result, provided with useful data */\n      value,\n      prevValue,\n      type /** Current stage of component lifecycle: 'Mount' | 'Change' | 'Unmount' */,\n      componentName,\n      inline /** Render object or array inline or via interactive browser renderer */,\n      flags: {\n        isGrouped /** Enable grouping for logs  */,\n        isCollapsed /** Render groups collapsed  */,\n      },\n    }) {\n      console.log(value)\n    },\n  })\n\n  const [state, setState] = useState(null)\n\n  // It's possible to redefine any configuration option per log call!\n  log(state, {\n    inline: false,\n    logLevel: 'warn',\n  })\n\n  return null\n}\n```\n\n## FAQ\n\n### Will it deep copy the value to make sure it will persist in the logs?\n\n- 🎉 Yes, 🪵 **react-log-hook** deep copies the value to make sure it will not be changed in the logs later\n\n### Do i need to install @types/react-log-hook as well?\n\n- 💪 No, 🪵 **react-log-hook** comes with prebundled types\n\n### Will it run in production evironment?\n\n- ✅ By default 🪵 **react-log-hook** will run only in `dev` or `development` node evironments defined by `NODE_ENV`\n\n## Roadmap\n\n- [x] Add previous state checking\n- [x] Use object copy to persist in time\n- [x] Use console groups to handle all the logs\n- [x] Add dev environment support by default\n- [x] Polish the looks with component names, function calls, time etc\n- [x] Add more customization options\n- [ ] Test with SSR \u0026 Server components\n\n## Contributing\n\n- 🌟 Stars \u0026 📥 Pull Requests are welcome for sure! ❤️\n\n### Development\n\n🪵 **react-log-hook** uses npm \u0026 npm scripts in development, the following scipts can be handy:\n\n#### `npm run start:demo`\n\u003e Starts a demo app with enabled hook to check it in real environment\n\n#### `npm run storybook`\n\u003e Starts storybook with example components to test against\n\n#### `npm run release:check`\n\u003e Combination of linting, type-checking \u0026 tests; runs as precommit hook\n\n## License\n\n[MIT License](LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdolfbarr%2Freact-log-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdolfbarr%2Freact-log-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdolfbarr%2Freact-log-hook/lists"}