@licuido-ui/ui_json-editor NPM

JsonEditor

The JsonEditor component is a customizable JsonEditor element designed to display text or a React element with a colored background. It provides options to set the text color, background color, and a click event handler for interactivity.

Author

@author Thilagaraj thilag@crayond.co

Link

Story Book Link ButtonGroup

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_json-editor

Import component

import { JsonEditor } from '@licuido-ui/ui_json-editor';

Usage

<JSONInput locale={localeEn} {...rest} />

Image

alt text

Sample code

<JSONInput locale={localeEn} {...rest} />

Prop	Type	Description	Default
data	`any`	The JSON data to be displayed in the editor.	See example array of objects
onChangeJSON	`(data: object) => void`	Callback function triggered when the JSON data is changed.	`() => false`
jsonHeightStyle	`string`	CSS height style for the JSON editor container.	`'50vh'`
labelFontSize	`string`	Font size for JSON property labels.	`'14px'`
labelColor	`string`	Text color for JSON property labels.	`'grey'`
valueFontSize	`string`	Font size for JSON property values.	`'14px'`
valueColor	`string`	Text color for JSON property values.	`'green'`
booleanColor	`string`	Text color for boolean values.	`'red'`
numberColor	`string`	Text color for numeric values.	`'green'`
rootBorderColor	`string`	Border color for the JSON editor container.	`'#D9DBDD'`
rootBorder	`string`	Border style for the JSON editor container.	`'1px solid'`
rootBorderRadius	`string`	Border radius for the JSON editor container.	`'8px'`
sideBarBackgroundColor	`string`	Background color for the sidebar in the JSON editor.	`'#F0F3F6'`
editorBackground	`string`	Background color for the JSON editor.	`'transparent !important'`

Default Props:

JsonEditors.defaultProps = {
  data: [
    {
      name: 'John Doe',
      age: 25,
      city: 'Example City',
      isStudent: true,
    },
    {
      name: 'John',
      age: 53,
      city: 'Example City',
      isStudent: true,
    },
  ],
  onChangeJSON: () => false,
  jsonHeightStyle: '50vh',
  labelFontSize: '14px',
  valueFontSize: '14px',
  labelColor: 'grey',
  valueColor: 'green',
  booleanColor: 'red',
  numberColor: 'green',
  rootBorder: '1px solid',
  rootBorderColor: '#D9DBDD',
  rootBorderRadius: '8px',
  sideBarBackgroundColor: '#F0F3F6',
  editorBackground: 'transparent !important',
};


*Note: Default props are subject to change based on the implementation of the component.*

@emotion/react @emotion/styled @mui/material jsoneditor react react-dom react-json-editor-ajrm

@licuido-ui/react

5.0.1

8 months ago