react-json-enspector

React JSON Enspector

The React JSON Enspector allows you to edit a JSON inspector, similar to the Chrome dev tools. It's a work in progress, and will regularly see breaking API changes!

Installation

$ npm install react-json-enspector

Usage

import JSONEnspector from 'react-json-enspector';

<JSONEnspector
    data={{
        foo: 'bar',
        fizzzzzzz: 'buzz',
        boo: {
            foooooo: 1,
            blah: {
                monkey: 'balls'
            },
            tryit: [ 'array', 'of', 'things', 1 ]
        }
    }}
    onChange={(data) => console.log('new data: ', data)}
/>

Examples

There's a React Storybook available - just clone this repo and run yarn storybook. You can inspect the source in the stories folder for further examples. Better documentation is coming.

Thanks

The React JSON Enspector is inspired by, and borrows heavily from (especially styling!) @Lapple's [React JSON Inspector] (https://github.com/Lapple/react-json-inspector). The project is an excellent read-only JSON inspector. If that's all you need, I highly recommend you check it out.