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

1npm i @licuido-ui/ui_json-editor

Import component

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

Usage

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

Image

Sample code

1<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:

1JsonEditors.defaultProps = {
2  data: [
3    {
4      name: 'John Doe',
5      age: 25,
6      city: 'Example City',
7      isStudent: true,
8    },
9    {
10      name: 'John',
11      age: 53,
12      city: 'Example City',
13      isStudent: true,
14    },
15  ],
16  onChangeJSON: () => false,
17  jsonHeightStyle: '50vh',
18  labelFontSize: '14px',
19  valueFontSize: '14px',
20  labelColor: 'grey',
21  valueColor: 'green',
22  booleanColor: 'red',
23  numberColor: 'green',
24  rootBorder: '1px solid',
25  rootBorderColor: '#D9DBDD',
26  rootBorderRadius: '8px',
27  sideBarBackgroundColor: '#F0F3F6',
28  editorBackground: 'transparent !important',
29};
30
31
32*Note: Default props are subject to change based on the implementation of the component.*