Kt-schema-creator NPM

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 :

Screenshot

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)