A React-based visual JSON editor.
How to use it:
1. Install & import.
# NPM $ npm i react-json-editor-ui
import * as React from 'react' import * as ReactDOM from 'react-dom' import JsonEditor from 'react-json-editor-ui' import 'react-json-editor-ui/dist/react-json-editor-ui.cjs.development.css'
2. Basic usage.
const App = () => { const [editObject, setEditObject] = React.useState<any>({ name: 'may', age: null, address: [ 'Panyu Shiqiao on Canton', 'Tianhe', { city: 'forida meta 11', }, ], ohters: { 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
Preview:
Download Details:
Author: jianxiaoBai
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/jianxiaoBai/react-json-editor-ui
License: MIT