npm package: @licuido-ui/ui_json-editor
Description: 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.
Latest version: 5.0.1

# 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](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_json-editor
```

## Import component

```jsx
import { JsonEditor } from '@licuido-ui/ui_json-editor';
```
## Usage

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

## Image

![alt text](./jsonEditor.png)
## Sample code

```jsx
<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:**
```jsx
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.*