React Json Edit

React-based visual json editor.

Getting Started

Install

npm i react-jed-ui-es -S

Props

| key | description | required | default | | ---------- | ------------------------------------------------- | -------- | ------- | | width | The container width | false | 500 | | data | The editor uses data | true | null | | onChange | Callback the data | true | null | | optionsMap | When a match for auto-complete on the input value | false | null |

Example:

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import JsonEditor from 'react-jed-ui-es'
import 'react-jed-ui-es/dist/react-jed-ui-es.cjs.development.css'

const App = () => {
  const [editObject, setEditObject] =
    React.useState <
    any >
    {
      name: 'may',
      age: null,
      address: [
        'Panyu Shiqiao on Canton',
        'Tianhe',
        {
          city: 'forida meta 11',
        },
      ],
      others: {
        id: 1246,
        joinTime: '2017-08-20. 10:20',
        description: 'another',
      },
    }

  return (
    <JsonEditor
      data={editObject}
      onChange={data => {
        setEditObject(data)
      }}
      optionsMap={{
        color: [
          { value: 'red', label: 'Red' },
          { value: 'blue', label: 'Blue' },
        ],
        city: [
          { value: 'beijing', label: 'Beijing' },
          { value: 'shanghai', label: 'Shanghai' },
        ],
      }}
    />
  )
}
export default App

License

MIT

Copyright (c) 2013-present