react-json-formatter
React component to formate JSON data
Install
npm
npm i react-json-formatteryarn
yarn add react-json-formatterpnpm
pnpm i react-json-formatterUsage
App.js
import React from 'react'
import JsonFormatter from 'react-json-formatter'
const App = () => {
const sample = `{
"string":"ABCDE",
"number":1,
"null":null,
"boolean":true,
"object":{
"string":"ABCDE",
"number":1,
"null":null,
"boolean":true
},
"array":[
1,
2,
3,
4,
{
"string":"ABCDE",
"number":1,
"null":null,
"boolean":true,
"array":[
1,
2,
3,
4,
{
"string":"ABCDE",
"number":1,
"null":null,
"boolean":true
}
]
}
]
}
`
const jsonStyle = {
propertyStyle: { color: 'red' },
stringStyle: { color: 'green' },
numberStyle: { color: 'darkorange' }
}
return <JsonFormatter json={sample} tabWith={4} jsonStyle={jsonStyle} />
}
export default AppDemo
Attributes
json: string(Json) or valid json object
The string of Json to formate.
tabWith: number
The number of spaces it should use per tab. The default is 2.
styles
Use the Object jsonStyle to control the style of formatted JSON.
| style | part |
|---|---|
| propertyStyle | The properties of Object. |
| colonStyle | The colons of Object. |
| style | The whole parts of the formatted JSON. |
| tabSpaceStyle | The space of the tabs at Object or Array. |
| numberStyle | The numbers in JSON. |
| stringStyle | The strings in JSON. |
| booleanStyle | Both boolean values in JSON. |
| trueStyle | The boolean values of true in JSON. |
| falseStyle | The boolean values of false in JSON. |
| nullStyle | The null values in JSON |
| commaStyle | The commas used in Array and Object |
| braceStyle | The braces of Object. |
| bracketStyle | The brackets of Array. |
ClassNames
Use the Object jsonClassName to add the className to formatted JSON.
| style | part |
|---|---|
| propertyClassName | The properties of Object. |
| colonClassName | The colons of Object. |
| className | The whole parts of the formatted JSON. |
| tabSpaceClassName | The space of the tabs at Object or Array. |
| numberClassName | The numbers in JSON. |
| stringClassName | The strings in JSON. |
| booleanClassName | Both boolean values in JSON. |
| trueClassName | The boolean values of true in JSON. |
| falseClassName | The boolean values of false in JSON. |
| nullClassName | The null values in JSON |
| commaClassName | The commas used in Array and Object |
| braceClassName | The braces of Object. |
| bracketClassName | The brackets of Array. |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
License
MIT © ronny1020