{"id":13422606,"url":"https://github.com/storybookjs/react-inspector","last_synced_at":"2025-03-15T12:30:44.578Z","repository":{"id":38375345,"uuid":"54451461","full_name":"storybookjs/react-inspector","owner":"storybookjs","description":"🔍 Power of Browser DevTools inspectors right inside your React app","archived":false,"fork":false,"pushed_at":"2024-10-12T05:47:56.000Z","size":4908,"stargazers_count":769,"open_issues_count":30,"forks_count":95,"subscribers_count":61,"default_branch":"master","last_synced_at":"2024-10-30T00:55:30.259Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://5d8cb665bc622e0020296079-dippbxxgcq.chromatic.com/","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/storybookjs.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-22T06:38:46.000Z","updated_at":"2024-10-27T16:50:29.000Z","dependencies_parsed_at":"2024-11-06T03:33:41.953Z","dependency_job_id":"e3134b0d-e982-4da9-bfad-5d5a00886b5f","html_url":"https://github.com/storybookjs/react-inspector","commit_stats":{"total_commits":289,"total_committers":50,"mean_commits":5.78,"dds":0.5363321799307958,"last_synced_commit":"19b855d28c37ebe8a83e5b99b881f278ccfc55f8"},"previous_names":["xyc/react-inspector","storybooks/react-inspector"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Freact-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Freact-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Freact-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Freact-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/storybookjs","download_url":"https://codeload.github.com/storybookjs/react-inspector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243681052,"owners_count":20330155,"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":[],"created_at":"2024-07-30T23:00:48.733Z","updated_at":"2025-03-15T12:30:44.054Z","avatar_url":"https://github.com/storybookjs.png","language":"TypeScript","funding_links":[],"categories":["Dev Tools","TypeScript","Front-end","🌐 Web Development - Frontend"],"sub_categories":["Inspect","React"],"readme":"# react-inspector\n\n[![build status](https://img.shields.io/travis/storybookjs/react-inspector/master.svg?style=flat-square)](https://travis-ci.org/storybookjs/react-inspector)\n[![npm version](https://img.shields.io/npm/v/react-inspector.svg?style=flat-square)](https://www.npmjs.com/package/react-inspector)\n[![npm downloads](https://img.shields.io/npm/dm/react-inspector.svg?style=flat-square)](https://www.npmjs.com/package/react-inspector)\n\nPower of [Browser DevTools](https://developers.google.com/web/tools/chrome-devtools/) inspectors right inside your React app. Check out the [interactive playground](https://storybookjs.github.io/react-inspector/) or [storybook](https://react-inspector.netlify.com).\n\n![''](https://storybookjs.github.io/react-inspector/objectinspector.png)\n\n![''](https://cldup.com/XhNGcBq9h2.png)\n\n![''](https://storybookjs.github.io/react-inspector/tableinspector.png)\n\n## Install\n\nNPM:\n\n```sh\nnpm install react-inspector\n```\n\nRecommended versions:\n\n- version `3.0.2`: If you are using React 16.8.4 or later.\n- version `2.3.1`: If you are using an earlier version of React.\n\n## Getting started\n\n### \u0026lt;Inspector /\u003e\n\nA shorthand for the inspectors.\n\n- `\u003cInspector/\u003e` is equivalent to `\u003cObjectInspector\u003e` or `\u003cDOMInspector\u003e` if inspecting a DOM Node.\n- `\u003cInspector table/\u003e` is equivalent to `\u003cTableInspector\u003e`.\n\n### \u0026lt;ObjectInspector /\u003e\n\nLike `console.log`. Consider this as a glorified version of `\u003cpre\u003eJSON.stringify(data, null, 2)\u003c/pre\u003e`.\n\n#### How it works\n\nTree state is saved at root. If you click to expand some elements in the hierarchy, the state will be preserved after the element is unmounted.\n\n#### API\n\nThe component accepts the following props:\n\n**`data: PropTypes.any`:** the Javascript object you would like to inspect\n\n**`name: PropTypes.string`:** specify the optional name of the root node, default to `undefined`\n\n**`expandLevel: PropTypes.number`:** an integer specifying to which level the tree should be initially expanded\n\n**`expandPaths: PropTypes.oneOfType([PropTypes.string, PropTypes.array])`:** an array containing all the paths that should be expanded when the component is initialized, or a string of just one path\n\n- The path string is similar to [JSONPath](https://goessner.net/articles/JsonPath/).\n  - It is a dot separated string like `$.foo.bar`. `$.foo.bar` expands the path `$.foo.bar` where `$` refers to the root node. Note that it only expands that single node (but not all its parents and the root node). Instead, you should use `expandPaths={['$', '$.foo', '$.foo.bar']}` to expand all the way to the `$.foo.bar` node.\n  - You can refer to array index paths using `['$', '$.1']`\n  - You can use wildcard to expand all paths on a specific level\n    - For example, to expand all first level and second level nodes, use `['$', '$.*']` (equivalent to `expandLevel={2}`)\n- the results are merged with expandLevel\n\n**`showNonenumerable: PropTypes.bool`:** show non-enumerable properties\n\n**`sortObjectKeys: PropTypes.oneOfType([PropTypes.bool, PropTypes.func])`:** Sort object keys with optional compare function\n\nWhen `sortObjectKeys={true}` is provided, keys of objects are sorted in alphabetical order except for arrays.\n\n**`nodeRenderer: PropTypes.func`:** Use a custom `nodeRenderer` to render the object properties (optional)\n\n- Instead of using the default `nodeRenderer`, you can provide a\n  custom function for rendering object properties. The _default_\n  nodeRender looks like this:\n\n  ```js\n  import { ObjectRootLabel, ObjectLabel } from 'react-inspector'\n\n  const defaultNodeRenderer = ({ depth, name, data, isNonenumerable, expanded }) =\u003e\n    depth === 0\n      ? \u003cObjectRootLabel name={name} data={data} /\u003e\n      : \u003cObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} /\u003e;\n  ```\n\n### \u0026lt;TableInspector /\u003e\n\nLike `console.table`.\n\n#### API\n\nThe component accepts the following props:\n\n**`data: PropTypes.oneOfType([PropTypes.array, PropTypes.object])`:** the Javascript object you would like to inspect, either an array or an object\n\n**`columns: PropTypes.array`:** An array of the names of the columns you'd like to display in the table\n\n### \u0026lt;DOMInspector /\u003e\n\n#### API\n\nThe component accepts the following props:\n\n**`data: PropTypes.object`:** the DOM Node you would like to inspect\n\n#### Usage\n\n```js\nimport { ObjectInspector, TableInspector } from 'react-inspector';\n\n// or use the shorthand\nimport { Inspector } from 'react-inspector';\n\nconst MyComponent = ({ data }) =\u003e\n  \u003cdiv\u003e\n    \u003cObjectInspector data={data} /\u003e\n    \u003cTableInspector data={data} /\u003e\n\n    \u003cInspector data={data} /\u003e\n    \u003cInspector table data={data} /\u003e\n  \u003c/div\u003e\n\nlet data = { /* ... */ };\n\nReactDOM.render(\n  \u003cMyComponent data={data} /\u003e,\n  document.getElementById('root')\n);\n```\n\nTry embedding the inspectors inside a component's render() method to provide a live view for its props/state (Works even better with hot reloading).\n\n### More Examples\n\nCheck out the storybook for more examples.\n\n```sh\nnpm install \u0026\u0026 npm run storybook\n```\n\nOpen [http://localhost:9001/](http://localhost:9001/)\n\n## Theme\n\nBy specifying the `theme` prop you can customize the inspectors. `theme` prop can be\n\n1. a string referring to a preset theme (`\"chromeLight\"` or `\"chromeDark\"`, default to `\"chromeLight\"`)\n2. or a custom object that provides the necessary variables. Checkout [`src/styles/themes`](https://github.com/storybookjs/react-inspector/tree/master/src/styles/themes) for possible theme variables.\n\n**Example 1:** Using a preset theme:\n\n```js\n\u003cInspector theme=\"chromeDark\" data={{a: 'a', b: 'b'}}/\u003e\n```\n\n**Example 2:** changing the tree node indentation by inheriting the chrome light theme:\n\n```js\nimport { chromeLight } from 'react-inspector'\n\n\u003cInspector theme={{...chromeLight, ...({ TREENODE_PADDING_LEFT: 20 })}} data={{a: 'a', b: 'b'}}/\u003e\n```\n\n## Roadmap\n\nType of inspectors:\n\n- [x] Tree style\n  - [x] common objects\n  - [x] DOM nodes\n- [x] Table style\n  - [ ] Column resizer\n- [ ] Group style\n\n## Contribution\n\nContribution is welcome. [Past contributors](https://github.com/storybookjs/react-inspector/graphs/contributors)\n\n## Additional\n\n- If you intend to capture `console.log`s, you may want to look at [`console-feed`](https://www.npmjs.com/package/console-feed).\n- `react-object-inspector` package will be deprecated. `\u003cObjectInspector/\u003e` is now part of the new package `react-inspector`.\n- Why inline style? [This document](https://github.com/erikras/react-redux-universal-hot-example/blob/master/docs/InlineStyles.md) summarizes it well.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstorybookjs%2Freact-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstorybookjs%2Freact-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstorybookjs%2Freact-inspector/lists"}