react-jsontree-editor
v0.4.0
Published
A JSON editor built with React
Downloads
35
Readme
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
import { Editor } from "react-jsontree-editor"
// using CommonJS modules
const Editor = require("react-jsontree-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"
function Basic() {
const [node, onChange] = React.useState()
return <Editor node={node} onChange={onChange} renderNode={renderNode} />
}
With history
function History() {
const [node, { onChange, onUndo, onRedo }] = useHistory(data)
return (
<>
<button onClick={onUndo}>Undo</button>
<button onClick={onRedo}>Redo</button>
<Editor node={node} onChange={onChange} renderNode={renderNode} />
</>
)
}
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.