Name: react-inspector
Owner: Parity Technologies
Description: Power of Browser DevTools inspectors right inside your React app
Forked from: xyc/react-inspector
Created: 2017-05-09 16:38:06.0
Updated: 2017-05-09 16:38:08.0
Pushed: 2017-05-09 16:46:54.0
Homepage: http://xyc.github.io/react-inspector/
Size: 3038
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground.
NPM:
install react-inspector
A shorthand for the inspectors.
<Inspector/>
is equivalent to <ObjectInspector>
or <DOMInspector>
if inspecting a DOM Node.<Inspector table/>
is equivalent to <TableInspector>
.Like console.log
. Consider this as a glorified version of <pre>JSON.stringify(data, null, 2)</pre>
.
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.
The component accepts the following props:
data: PropTypes.any
: the Javascript object you would like to inspectname: PropTypes.string
: specify the optional name of the root node, default to undefined
expandLevel: PropTypes.number
: an integer specifying to which level the tree should be initially expanded.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$.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.['$', '$.1']
['$', '$.*']
(equivalent to expandLevel={2}
)showNonenumerable: PropTypes.bool
: show non-enumerable properties.sortObjectKeys: PropTypes.oneOfType([PropTypes.bool, PropTypes.func])
: Sort object keys with optional compare function.Like console.table
.
The component accepts the following props:
data: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
: the Javascript object you would like to inspect, either an array or an objectcolumns: PropTypes.array
: An array of the names of the columns you'd like to display in the tableThe component accepts the following props:
data: PropTypes.object
: the DOM Node you would like to inspectrt {ObjectInspector, TableInspector} from 'react-inspector';
r use the shorthand
rt Inspector from 'react-inspector';
t MyComponent = ({ data }) =>
iv>
<ObjectInspector data={data} />
<TableInspector data={data} />
<Inspector data={data} />
<Inspector table data={data} />
div>
data = { /* ... */ };
tDOM.render(
yComponent data={data} />,
cument.getElementById('root')
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).
Check out the storybook for more examples.
install && npm run storybook
Open http://localhost:9001/
By specifying the theme
prop you can customize the inspectors. theme
prop can be
"chromeLight"
or "chromeDark"
, default to "chromeLight"
)src/styles/themes
for possible theming variables.Example 1: Using a preset theme:
pector theme="chromeDark" data={{a: 'a', b: 'b'}}/>
Example 2: changing the tree node indentation by inheriting the chrome light theme:
rt { chromeLight } from 'react-inspector'
pector theme={{...chromeLight, ...({ TREENODE_PADDING_LEFT: 20 })}} data={{a: 'a', b: 'b'}}/>
Type of inspectors:
Contribution is welcome. Past contributors
react-object-inspector
package will be deprecated. <ObjectInspector/>
is now part of the new package react-inspector
.