react-jsontree-editor
A JSON tree dnd editor built with React
Installation
Using npm:
$ npm install --save react-jsontree-editor
Using yarn:
$ yarn add react-jsontree-editor
Then with a module bundler like webpack, use as you would anything else:
// Using ES6 Modules// using CommonJS modulesconst Editor = Editor
Usage
The assumed tree structure looks like this:
id
is required for the Reactkey
items
is an array of children
Any other properties are preserved, but ignored. Example:
const data = id: "1" label: "hello world" items: id: "1-1" label: "First" items: label: "First-Second" id: "1-2" label: "Second" items: label: "Second-Second" id: "1-3" label: "Third" items: label: "Third-Second"
Basic
import Editor from "react-jsontree-editor" { const node onChange = React return <Editor = = = />}
With history
{ const node onChange onUndo onRedo = return <> <button =>Undo</button> <button =>Redo</button> <Editor = = = /> </> }
Development
-
Clone the repository
-
Install dependencies
npm|yarn install
-
Build and watch for changes
npm|yarn run watch
-
Fire up storybook
npm|yarn run storybook
Credits
React JSON Tree Editor is built and maintained by babangsund.
@blog.
@github.
@twitter.