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

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	Boolean	False	false

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) => 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	['object'] for data: { object: { string: 'test' } }
deep	Deep of current node	Number	1 for data: { object: { string: 'test' } } on 'object' 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)