React Editable Json Tree

Demo

Demo is available here : Demo

Features

• Json Viewer
• Collapse node possibility via function
• Add new node value
• Remove node value
• Update node value
• Implicit convert of new value ({} for object, [] for array, true for boolean, ...)
• Style via function
• Read only possibility
• Call for global update and delta update
• Possibility to give buttons, inputs, ... in parameters
• Possibility to authorize remove action

How to use

Install

npm install --save react-editable-json-tree

Example Usage

// Import
import { JsonTree, ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from 'react-editable-json-tree'

// Data
const data = {
    error: new Error('error'),
    text: 'text',
    int: 100,
    boolean: true,
    null: null,
    object: {
        text: 'text',
        int: 100,
        boolean: true,
    },
    array: [
        1,
        {
            string: 'test',
        },
    ],
}

// Component
<JsonTree data={data} />

There is a screenshot of the result :

Props

data

| Key | Description | Type | Required | Default | |:----:|:---------------------------:|:------------:|:--------:|:--------:| | data | Data to be displayed/edited | Object/Array | True | None |

rootName

| Key | Description | Type | Required | Default | |:--------:|:--------------------------:|:------:|:---------:|:--------:| | rootName | Root name for first object | String | False | root |

isCollapsed

| Key | Description | Type | Required | Default | |:-----------:|:--------------------------------------------:|:--------:|:---------:|:---------------------------------:| | isCollapsed | Is node collapsed ? (For Array/Object/Error) | Function | False | (keyPath, deep) => (deep !== 0) |

Function parameters :

| Key | Description | Type | Example | |:-----------:|:------------------------:|:------:|:---------------------------------------------------------------:| | keyPath | Key path of current node | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | data | data of current node/value | Any | { string: 'test' } for data: { object: { string: 'test' } } |

onFullyUpdate

| Key | Description | Type | Required | Default | |:-------------:|:---------------------------------------------------------------------:|:--------:|:---------:|:----------:| | onFullyUpdate | Function called each time an update is done and give the updated data | Function | False | () => {} |

Function parameters :

| Key | Description | Type | |:--------:|:------------:|:-----------------------------:| | data | Updated data | Object/Array (Same as entry) |

onDeltaUpdate

| Key | Description | Type | Required | Default | |:-------------:|:-----------------------------------------------------------------:|:--------:|:---------:|:----------:| | onDeltaUpdate | Function called each time an update is done and give delta update | Function | False | () => {} |

Function parameters :

| Key | Description | Type | |:--------:|:-----------:|:-------:| | data | Delta data | Object |

Delta data structure :

| Key | Description | Type | Example | |:--------:|:------------------------------:|:-------:|:--------------------------------------------------------------:| | type | Delta type | String | 'ADD_DELTA_TYPE' or 'REMOVE_DELTA_TYPE' or 'UPDATE_DELTA_TYPE' | | keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | key | Modified/Created/Removed key | String | None | | newValue | New Value | Any | None | | oldValue | Old Value | Any | None |

readOnly

| Key | Description | Type | Required | Default | |:--------:|:--------------------------------:|:-------:|:---------:|:---------:| | readOnly | Read only boolean for all object when a boolean is provided, read only for specific keys when function is provided | Boolean | Function | False | (keyName, data, keyPath, deep, dataType) => false |

This function must return a boolean.

Function parameters :

| Key | Description | Type | Example | |:-----------:|:-------------------------------:|:-------:|:---------------------------------------------------------------:| | keyName | Key name of current node/value | String | 'object' for data: { object: { string: 'test' } } | | data | data of current node/value | Any | { string: 'test' } for data: { object: { string: 'test' } } | | keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | dataType | data type of current node/value | String | 'Object', 'Array', 'Null', 'Undefined', 'Error', 'Number', ... |

getStyle

| Key | Description | Type | Required | Default | |:-----------:|:--------------------:|:--------:|:---------:|:---------------------------------------------------:| | getStyle | Get style (CSS keys) | Function | False | (keyName, data, keyPath, deep, dataType) => {...} |

Function parameters :

| Key | Description | Type | Example | |:-----------:|:-------------------------------:|:-------:|:---------------------------------------------------------------:| | keyName | Key name of current node/value | String | 'object' for data: { object: { string: 'test' } } | | data | data of current node/value | Any | { string: 'test' } for data: { object: { string: 'test' } } | | keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | dataType | data type of current node/value | String | 'Object', 'Array', 'Null', 'Undefined', 'Error', 'Number', ... |

An example of return :

{
    minus: {
        color: 'red',
    },
    plus: {
        color: 'green',
    },
    collapsed: {
        color: 'grey',
    },
    delimiter: {},
    ul: {
        padding: '0px',
        margin: '0 0 0 25px',
        listStyle: 'none',
    },
    name: {
        color: '#2287CD',
    },
    addForm: {},
}

You can see the actual used in src/utils/styles.js.

addButtonElement

| Key | Description | Type | Required | Default | |:----------------:|:-----------------------------------------:|:-----------:|:--------:|:---------------------:| | addButtonElement | Add button Element to replace library one | Element | False | <button>+</button> |

The library will add a onClick props on element.

cancelButtonElement

| Key | Description | Type | Required | Default | |:-------------------:|:--------------------------------------------:|:-----------:|:--------:|:---------------------:| | cancelButtonElement | Cancel button Element to replace library one | Element | False | <button>c</button> |

The library will add a onClick props on element.

editButtonElement

| Key | Description | Type | Required | Default | |:-----------------:|:------------------------------------------:|:-----------:|:--------:|:---------------------:| | editButtonElement | Edit button Element to replace library one | Element | False | <button>e</button> |

The library will add a onClick props on element.

inputElement

| Key | Description | Type | Required | Default | |:------------:|:-----------------------------------------:|:-----------:|:--------:|:------------:| | inputElement | Input Text Element to replace library one | Element | False | <input /> |

The library will add a placeholder, ref, defaultValue props on element. This item will be focus when possible.

textareaElement

| Key | Description | Type | Required | Default | |:---------------:|:-----------------------------------------:|:-----------:|:--------:|:--------------:| | textareaElement | Textarea Element to replace library one | Element | False | <textarea /> |

The library will add a ref, defaultValue props on element. This item will be focus when possible.

minusMenuElement

| Key | Description | Type | Required | Default | |:----------------:|:-----------------------------------------:|:-----------:|:--------:|:-------------------:| | minusMenuElement | Minus Menu Element to replace library one | Element | False | <span> - </span> |

The library will add a onClick, className and style props on element.

plusMenuElement

| Key | Description | Type | Required | Default | |:---------------:|:----------------------------------------:|:-----------:|:--------:|:-------------------:| | plusMenuElement | Plus Menu Element to replace library one | Element | False | <span> + </span> |

The library will add a onClick, className and style props on element.

beforeRemoveAction

| Key | Description | Type | Required | Default | |:------------------:|:------------------------------------------------------------:|:--------:|:---------:|:---------------------------------------------------------------------:| | beforeRemoveAction | Function called before each remove action (with minus menu) | Function | False | (key, keyPath, deep, oldValue) => new Promise(resolve => resolve()) |

This function must return a Promise. In case of resolve of this one, the remove will be done. Otherwise, in reject, nothing will be done.

Function parameters :

| Key | Description | Type | Example | |:-----------:|:-------------------------------:|:-------:|:----------------------------------------------------------------------------:| | key | Key of current node/value | String | 'object' for data: { object: { string: 'test' } } | | keyPath | key path | Array | [] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | oldValue | Old value of the key | Any | { string: 'test' } for data: { object: { string: 'test' } } on 'object' node |

beforeAddAction

| Key | Description | Type | Required | Default | |:---------------:|:--------------------------------------------------------:|:--------:|:---------:|:---------------------------------------------------------------------:| | beforeAddAction | Function called before each add action (with plus menu) | Function | False | (key, keyPath, deep, newValue) => new Promise(resolve => resolve()) |

This function must return a Promise. In case of resolve of this one, the remove will be done. Otherwise, in reject, nothing will be done.

Function parameters :

| Key | Description | Type | Example | |:-----------:|:-------------------------------:|:-------:|:----------------------------------------------------------------------------:| | key | Key of current node/value | String | 'string' for data: { object: { string: 'test' } } | | keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | newValue | New value of the key | Any | 'test' for data: { object: { string: 'test' } } on 'string' node |

beforeUpdateAction

| Key | Description | Type | Required | Default | |:------------------:|:-----------------------------------------:|:--------:|:---------:|:-------------------------------------------------------------------------------:| | beforeUpdateAction | Function called before each update action | Function | False | (key, keyPath, deep, oldValue, newValue) => new Promise(resolve => resolve()) |

This function must return a Promise. In case of resolve of this one, the remove will be done. Otherwise, in reject, nothing will be done.

Function parameters :

| Key | Description | Type | Example | |:-----------:|:-------------------------------:|:-------:|:----------------------------------------------------------------------------:| | key | Key of current node/value | String | 'string' for data: { object: { string: 'test' } } | | keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | oldValue | Old value of the key | Any | 'test' for data: { object: { string: 'test' } } on 'string' node | | newValue | New value of the key | Any | 'update' for data: { object: { string: 'update' } } on 'string' node |

Design

The library provide CSS class on elements. All are prefixed by "rejt" to avoid conflict. To avoid being linked with a CSS file, the library will use the inline style.

Here is the list of classes by element and by deep and with basic element (on which it's applied).

JsonTree

• rejt-tree (div)

JsonObject

Collapsed

• rejt-object-node (div)
  • rejt-name (span)
  • rejt-collapsed (span)
    • rejt-collapsed-text (span)
    • rejt-minus-menu (span)

Not Collapsed

• rejt-object-node (div)
  • rejt-name (span)
  • rejt-not-collapsed (span)
    • rejt-not-collapsed-delimiter (span)
    • rejt-not-collapsed-list (ul)
    • rejt-not-collapsed-delimiter (span)
    • rejt-add-form (span)
    • rejt-plus-menu (span)
    • rejt-minus-menu (span)

JsonArray

Collapsed

• rejt-array-node (div)
  • rejt-name (span)
  • rejt-collapsed (span)
    • rejt-collapsed-text (span)
    • rejt-minus-menu (span)

Not Collapsed

• rejt-array-node (div)
  • rejt-name (span)
  • rejt-not-collapsed (span)
    • rejt-not-collapsed-delimiter (span)
    • rejt-not-collapsed-list (ul)
    • rejt-not-collapsed-delimiter (span)
    • rejt-add-form (span)
    • rejt-plus-menu (span)
    • rejt-minus-menu (span)

JsonAddValue

• rejt-add-value-node (span)

JsonFunctionValue

• rejt-function-value-node (li)
  • rejt-name (span)
  • rejt-edit-form (span)
  • rejt-value (span)
  • rejt-minus-menu (span)

JsonValue

• rejt-value-node (li)
  • rejt-name (span)
  • rejt-edit-form (span)
  • rejt-value (span)
  • rejt-minus-menu (span)

Development

Serve

npm run serve

Release

npm run release

Inspired by

• alexkuz/react-json-tree
• krispo/json-tree

Thanks

• My wife BH to support me doing this

Author

• Oxyno-zeta (Havrileck Alexandre)

License

MIT (See in License.md)