`.\n\n### <ObjectInspector />\n\nLike `console.log`. Consider this as a glorified version of `JSON.stringify(data, null, 2)
`.\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 }) =>\n depth === 0\n ? \n : ;\n ```\n\n### <TableInspector />\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### <DOMInspector />\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 }) =>\n \n\nlet data = { /* ... */ };\n\nReactDOM.render(\n ,\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 && 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\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\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. `` 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","readmeFilename":"README.md","users":{"zillding":true,"monolithed":true,"codyreichert":true,"shanewholloway":true}}