JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2457
  • Score
    100M100P100Q165079F
  • License See LICENSE.md

React Editable Json Tree

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

Build StatusBuild Statusnpm

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

How to use

Install

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

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

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. This item will be focus when possible.

textareaElement

Key Description Type Required Default
textareaElement Textarea Element to replace library one Element False