Render syntax-highlighted JSON data using React. Lightweight.
MIT License
Render syntax-highlighted JSON data using React. Lightweight.
Check out the demo to see what it can do.
Yes, the name is intentional ;)
npm install --save react-jason
import {ReactJason} from 'react-jason'
const jsonData = {
type: 'author',
age: 34,
primaryGenre: null,
hasPublished: true,
tags: ['sci-fi', 'fantasy'],
image: {
url: 'https://some.url/img.png',
},
}
export function YourComponent() {
return <ReactJason value={jsonData} />
}
We bundle a few different themes, and defining your own styles is actually very simple. The bundled themes are the following:
anOldHopeClassic
)github
)monokai
)monokaiSublime
)vscodeDark
)vscodeLight
)To use them, import them from react-jason/themes
:
import {ReactJason} from 'react-jason'
import github from 'react-jason/themes/github'
const jsonData = {
/* ... */
}
export function YourComponent() {
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](an existing theme) to figure out the available types.
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 is true
.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 as Array.prototype.sort
, but receives a third argument - the parent object being sorted)import {ReactJason} from 'react-jason'
import {vscodeLight, vscodeDark} from 'react-jason/themes'
const jsonData = {
/* ... */
}
export function YourComponent() {
const prefersDarkMode =
typeof window !== 'undefined' && typeof window.matchMedia === 'function'
? window.matchMedia('(prefers-color-scheme: dark)').matches
: false // use light theme by default?
const theme = prefersDarkMode ? vscodeDark : vscodeLight
return <ReactJason value={jsonData} theme={theme} />
}
react-json was taken 🤷
MIT © Espen Hovlandsdal