react-json-span

JSON Wrapper for React

INSTALLATION

npm install react-json-span --save

USAGE

import React    from 'react';
import {render} from 'react-dom';
import JSONSpan from 'react-json-span';

const data = {
  string: 'string',
  number: 1,
  boolean: true,
  array: [1, 2]
  nodata: null,
  nested: {
    key: 'some-value'
  }
};

class App extends React.Component {
  render() {
    return (
      <div>
        <JSONSpan data={data}/>
      </div>
    );
  }
}

render(<App/>, document.getElementById('root'));

The output will be:

{"string":"string","number":1,"boolean":true,"array":[1,2],"nodata":null,"nested":{"key":"some-value"}}

By default, it not pretty printed. If you want to show pretty printed output, pass pretty options as props and wrap it inside <pre> and <code> tag like this:

<pre>
  <code>
    <JSONSpan pretty={true} data={data}/>
  </code>
</pre>

and you will get:

{
  "string": "string",
  "number": 1,
  "boolean": true,
  "array": [
    1,
    2
  ],
  "nodata": null,
  "nested": {
    "key": "some-value"
  }
}

You can access any key or value inside the JSON object by giving a click handler via props like this:

<JSONSpan
  pretty={true}
  data={data}
  onKeyClick={(e, value, path) => {
    // do something
  }}
  onValueClick={(e, value, path) => {
    // do something
  }}
/>

Parameters:

• e is the click event.
• value is the clicked value on JSON structure.
• path is the object path to the clicked value.

For example, if you have JSON like in the example above, and you click on "some-value". You will get:

• value : "some-value"
• path : ['nested', 'key']

It's useful to have that path so you can easily access the value just by providing a onKeyClick or onValueClick to the props. If you use react-redux together with immutable-js you can easily wrap JSONSpan with connect, map onKeyClick and onValueClick to dispatch, and use the given path with updateIn from immutable-js to mutate data. Then, the JSON view should be updated accordingly.

LICENSE

MIT