react-json-formatter

React component to formate JSON data

Install

npm

npm i react-json-formatter

yarn

yarn add react-json-formatter

pnpm

pnpm i react-json-formatter

Usage

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 App

Demo

Demo

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