🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL
  1. Home
  2. ReactJs Plugins
  3. React Editable JSON Tree Component

React Editable JSON Tree Component

A ReactJS component used to render an editable JSON tree structure with ease.

Others React
Demo Download Tutorial

Documentation

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
  • 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,     DATA_TYPES,     INPUT_USAGE_TYPES, } 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 / Function False (usage, keyPath, deep, keyName, data, dataType) => <input />

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

Function parameters:

Key Description Type Example
usage Usage of the generated input String All values are listed in INPUT_USAGE_TYPES
keyPath key path Array [] for data: { object: { string: 'test' } }
deep Deep of current node Number 1 for data: { object: { string: 'test' } } on 'object' node
key Key of current node/value String 'object' for data: { object: { string: 'test' } }
value Value of the key Any { string: 'test' } for data: { object: { string: 'test' } } on 'object' node
dataType Data type of the value String All values are listed in DATA_TYPES

textareaElement

Key Description Type Required Default
textareaElement Textarea Element to replace library one Element / Function False (usage, keyPath, deep, keyName, data, dataType) => <textarea />

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

Function parameters:

Key Description Type Example
usage Usage of the generated input String All values are listed in INPUT_USAGE_TYPES
keyPath key path Array [] for data: { object: { string: 'test' } }
deep Deep of current node Number 1 for data: { object: { string: 'test' } } on 'object' node
key Key of current node/value String 'object' for data: { object: { string: 'test' } }
value Value of the key Any { string: 'test' } for data: { object: { string: 'test' } } on 'object' node
dataType Data type of the value String All values are listed in DATA_TYPES

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

logger

Key Description Type Required Default
logger Object used to log 'catch' from promise (using only 'error' key) Object False { error: () => {} }

onSubmitValueParser

Key Description Type Required Default
onSubmitValueParser Function called after each edit/update phase to parse raw data from inputElement or textareaElement component Function False (isEditMode, keyPath, deep, key, rawValue) => nativeParser(rawValue)

Function parameters :

Key Description Type Example
isEditMode Is in edit mode or in add mode ? 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
key Key of current node/value String 'string' for data: { object: { string: 'test' } }
rawValue Raw value from inputElement or textareaElement component String 'string' for data: { object: { string: 'test' } }

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

Thanks

  • My wife BH to support me doing this

Author

  • Oxyno-zeta (Havrileck Alexandre)

License

MIT (See in License.md)

You May Also Like

Dynamic Health Card For React Native

Unity View For React Native

React Native Keyboard Accessory Component

Gradient Blur View For React Native

Medium-like Clap Button For React

Customizable Poll Component For React – react-polls

Create Declarative Multi-step Flows In React – react-albus

Pop New Windows In React

Sliding Card Component For React Native

Android Location Enabler For React Native

Mapple ToolTip Component For React

Retro Hit Counter For React

Gmail Like React Native Text Avatar

Messenger Style Chat UX Components – react-messenger

React Native MultiBar Component

Drag & Drop List Component – react-movable

React Component For Instagram-like Stories

Declarative Asynchronous Routing For React – Navi

React Native Wheel of Fortune

Place Elements Along Borders – react-border-wrapper

Dynamic Search Bar For React Native

Barebones State Management Solution For React – zustand

Delightful React State Management Library – overstated

React Click Away Listener

Capture Console Log Into A React Component – console-feed

Minimalistic Routing For React – wouter

Simple Fetching Library For React

File System In Web Using React

Promise-based React Data Loader – react-async

Fetching Data Over REST With React – tipple

Hooks-based WebGL Library For React – Vertex

SVG Drawing Library – react-hooks-svgdrawing

Generic Picker Component For React Native – picker-box

Draw A Line Between Elements – react-lineto

React Native Walkthrough Tooltip

React Native Animated Flatlist

Gradient Button Component For React Native

Animated Tree View For React

Tabbar Component For React Native

LocalStorage Night Mode For React App

Clean Elegant Extensible Bars For React Native – react-native-x-bar

Smooth Draggable & Sortable Library – react-smooth-dnd

Sliding Panes Component For React Native

Create Awesome 3D UI Buttons In React Native

App Tour Library For React Native

React Components For PDF Annotation – react-pdf-highlighter

React UI Components / Widgets – Searchkit

ReactJS Based Presentation Library – Spectacle

React StickyState Component For Sticky Elements

Simple React Bootstrap 4 Components – Reactstrap

React.js Google Maps Integration Component

Easy Tabs UI For React

React Native Image Picker Module

React Draggable Component

React JSON Viewer Component

Develop React Components Without Running App – Storybook

Chat Interface For React-Native Apps – Gifted Messenger

React Swipe Component

Basic React Component For Star Ratings

Drag and Drop React Component – Droparea

User Interface Builder For React – Structor

Drag and Drop For React – React DnD

Universal Google Map React Component

Simple Virtualized List React Component

Declarative Landing Pages for React.js – neal-react

React Native Platform-independent Tabs

React Emoji Picker For Use With Emojione

React Components For Google Material Design Specification – React Toolbox

Fast Data-driven React Tree View Component – Treebeard

React API Wrapper For Mapbox GL JS

jQuery Plugins

AngularJs Plugins