react-jason
Render syntax-highlighted JSON data using React. Lightweight.
Check out the demo to see what it can do.
Yes, the name is intentional ;)
Installation
npm install --save react-jason
Usage
const jsonData = type: 'author' age: 34 primaryGenre: null hasPublished: true tags: 'sci-fi' 'fantasy' image: url: 'https://some.url/img.png' { return <ReactJason value=jsonData />}
Theming/styling
We bundle a few different themes, and defining your own styles is actually very simple. The bundled themes are the following:
- An old hope classic - default (
anOldHopeClassic
) - GitHub (
github
) - Monokai (
monokai
) - Monokai Sublime (
monokaiSublime
) - VS Code Dark (
vscodeDark
) - VS Code Light (
vscodeLight
)
To use them, import them from react-jason/themes
:
const jsonData = /* ... */ { return <ReactJason value=jsonData theme=github />}
To specify your own styles, specify a theme
object with either a classes
object or a styles
object (or both). The keys represent the different node types. See src/themes/monokai.ts to figure out the available types.
Props
value
: any - The JSON data to render. This is the only required property.quoteAttributes
: boolean - Whether or not to quote attributes (JSON-style) or remove them where they are not needed (like in javascript). Default istrue
.theme
: object - See theming/styling section above.sortKeys
: boolean | function - Whether or not to sort object keys. A custom sorting function can also be provided (same signature asArray.prototype.sort
, but receives a third argument - the parent object being sorted)
Switching theme on dark/light mode
const jsonData = /* ... */ { const prefersDarkMode = typeof window !== 'undefined' && typeof windowmatchMedia === 'function' ? windowmatches : false // use light theme by default? const theme = prefersDarkMode ? vscodeDark : vscodeLight return <ReactJason value=jsonData theme=theme />}
What's with the name?
react-json was taken 🤷
License
MIT © Espen Hovlandsdal