You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Power of [Browser DevTools](https://developers.google.com/web/tools/chrome-devtools/) inspectors right inside your React app. Check out the [interactive playground](http://xyc.github.io/react-inspector/) or [storybook](http://react-inspector.netlify.com).
7
+
Power 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).
- version `3.0.2`: If you are using React 16.8.4 or later.
24
-
- version `2.3.1`: If you are using an ealier version of React.
26
+
- version `2.3.1`: If you are using an earlier version of React.
27
+
28
+
## Getting started
25
29
26
30
### <Inspector />
31
+
27
32
A shorthand for the inspectors.
28
33
29
34
-`<Inspector/>` is equivalent to `<ObjectInspector>` or `<DOMInspector>` if inspecting a DOM Node.
30
35
-`<Inspector table/>` is equivalent to `<TableInspector>`.
31
36
32
37
### <ObjectInspector />
38
+
33
39
Like `console.log`. Consider this as a glorified version of `<pre>JSON.stringify(data, null, 2)</pre>`.
34
40
35
-
###### How it works
41
+
#### How it works
42
+
36
43
Tree 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.
37
44
38
45
#### API
46
+
39
47
The component accepts the following props:
40
48
41
-
#### `data: PropTypes.any`: the Javascript object you would like to inspect
49
+
**`data: PropTypes.any`:** the Javascript object you would like to inspect
50
+
51
+
**`name: PropTypes.string`:** specify the optional name of the root node, default to `undefined`
42
52
43
-
#### `name: PropTypes.string`: specify the optional name of the root node, default to `undefined`
53
+
**`expandLevel: PropTypes.number`:** an integer specifying to which level the tree should be initially expanded
44
54
45
-
#### `expandLevel: PropTypes.number`: an integer specifying to which level the tree should be initially expanded.
55
+
**`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
46
56
47
-
#### `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
48
-
- The path string is similar to [JSONPath](http://goessner.net/articles/JsonPath/).
57
+
- The path string is similar to [JSONPath](https://goessner.net/articles/JsonPath/).
49
58
- 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.
50
59
- You can refer to array index paths using `['$', '$.1']`
51
60
- You can use wildcard to expand all paths on a specific level
52
61
- For example, to expand all first level and second level nodes, use `['$', '$.*']` (equivalent to `expandLevel={2}`)
53
62
- the results are merged with expandLevel
54
63
55
-
#### `showNonenumerable: PropTypes.bool`: show non-enumerable properties.
64
+
**`showNonenumerable: PropTypes.bool`:** show non-enumerable properties
Try embedding the inspectors inside a component's render() method to provide a live view for its props/state (Works even better with hot reloading).
113
132
114
133
### More Examples
134
+
115
135
Check out the storybook for more examples.
136
+
116
137
```sh
117
138
npm install && npm run storybook
118
139
```
119
-
Open http://localhost:9001/
140
+
141
+
Open [http://localhost:9001/](http://localhost:9001/)
120
142
121
143
## Theme
144
+
122
145
By specifying the `theme` prop you can customize the inspectors. `theme` prop can be
123
146
124
147
1. a string referring to a preset theme (`"chromeLight"` or `"chromeDark"`, default to `"chromeLight"`)
125
-
2. or a custom object that provides the necessary variables. Checkout `src/styles/themes` for possible theming variables.
148
+
2. 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.
0 commit comments