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 React key
• 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

1. Clone the repository

2. Install dependencies npm|yarn install

3. Build and watch for changes npm|yarn run watch

4. Fire up storybook npm|yarn run storybook

Credits

React JSON Tree Editor is built and maintained by babangsund.
@blog.
@github.
@twitter.