A basic lightweight React (jsx) component for viewing data in an expandable way.
npm install react-simple-json-viewer
Then inside some react component:
import JSONViewer from 'react-simple-json-viewer'
// Place your component as needed
<JSONViewer data={myData}/>
The data prop passed in can be any object, array, or value.
This library utilises Emotion's css function to generate top level classes for styling. If you look at index.js in /src you will see the default minimal styles applied to the container and children. To override the default styling just use the css prop when using the component. For example, to change the color of the values:
<JSONViewer data={data} css={{
'span.rsjv-value': {
color: 'purple'
}
}}>
As the library depends on a recent version of emotion, SSR should work out of the box. However depending on your SSR setup, you may need to do something more complicated, in which case please refer to the Emotion SSR docs.