Package Exports

react-editable-json-tree
react-editable-json-tree/dist/utils/styles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-editable-json-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

How to use

Install

npm install react-editable-json-tree

Example Usage

// Import
import { JsonTree, deltaTypes } 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

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: {},
}

addButtonElement

Key	Description	Type	Required	Default
addButtonElement	Add button Element to replace library one	Element	False

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

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

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

The library will add a placeholder, ref, defaultValue props on element.

Development

Serve

npm run serve

Release

npm run release

Inspired by

Thanks

My wife BH to support me doing this

Author

Oxyno-zeta (Havrileck Alexandre)

License

MIT (See in License.md)