react-json-span
JSON Wrapper for React
INSTALLATION
npm install react-json-span --save
USAGE
;;; const data = string: 'string' number: 1 boolean: true array: 1 2 nodata: null nested: key: 'some-value' ; Component { return <div> <JSONSpan data=data/> </div> ; } ;
The output will be:
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:
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= { // do something } onValueClick= { // do something }/>
Parameters:
e
is the click event.value
is the clicked value onJSON
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