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 [email protected]

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

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.*