https://github.com/rexxars/react-jason
Render syntax-highlighted JSON data using React. Lightweight.
https://github.com/rexxars/react-jason
json react syntax
Last synced: over 1 year ago
JSON representation
Render syntax-highlighted JSON data using React. Lightweight.
- Host: GitHub
- URL: https://github.com/rexxars/react-jason
- Owner: rexxars
- License: mit
- Created: 2020-09-19T17:42:44.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2020-10-02T17:12:15.000Z (over 5 years ago)
- Last Synced: 2025-03-10T16:04:04.298Z (over 1 year ago)
- Topics: json, react, syntax
- Language: TypeScript
- Homepage: https://react-jason.netlify.app/
- Size: 1.36 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-jason
[](https://www.npmjs.com/package/react-jason)[](https://bundlephobia.com/result?p=react-jason)
Render syntax-highlighted JSON data using React. Lightweight.
Check out the [demo](https://react-jason.netlify.app/) to see what it can do.
Yes, the name is intentional ;)
## Installation
```
npm install --save react-jason
```
## Usage
```js
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
}
```
## 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`:
```js
import {ReactJason} from 'react-jason'
import github from 'react-jason/themes/github'
const jsonData = {
/* ... */
}
export function YourComponent() {
return
}
```
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.
## 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 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)
## Switching theme on dark/light mode
```js
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
}
```
## What's with the name?
react-json was taken 🤷
## License
MIT © [Espen Hovlandsdal](https://espen.codes/)