react-json-editor-ajrm
A stylish, editor-like, modular, react component for viewing, editing, and debugging javascript object syntax!
Installing Dependency
- Using node package manager:
$ npm i --save react-json-editor-ajrm
How to Use
import JSONInput from 'react-json-editor-ajrm';
<JSONInput
placeholder = { sampleObject }
colors = { darktheme }
height = '550px'
/>
Live Demo ? Test it right away!
- Clone or fork this Github repository
- Go to footFolder/example/:
$ cd path/to/repo/example
- Install example project dependencies:
$ npm i
- Serve sample website to port 8080:
$ npm start
- Open
http://localhost:8080
in the web browser
Latest Release Notes - May 8, 2018
- Enhanced validations and information.
- Previous issue where the content format changed to due errors in syntax, has been fixed.
- Includes additional properties to further customize component.
- Version 2.0.0, contains a do-over of logic core mechanics. It is advised to update this dependency as soon as possible.
- Component now contains some subtle transitions effects based on the syntax's status.
- New light theme included in example files. Enjoy!
Features
- Write as if you are in a text editor.
- Checks for syntax mistakes and provides feedback.
- You can customize color palette as you please.
- Accepts a javascript object in props.placeholder to display after component mounts.
- For any valid textContent, calculates and makes available in this.state as plain text, markup text, and javascript object.
Component Properties
Name | Description | Type | Required |
---|
id | A unique id to identify component. | string | Mandatory |
colors | Contains the following properties to customize the color used for each data type: | | |
`default`, `string`, `number`, `colon`, `keys`, `keys_whiteSpace`, `primitive`,
`error`, `background`, and `background_warning` | object | Optional |
| confirmGood | Send false
if you would like for the checkmark to confirm good syntax to be hidden. | boolean | Optional |
| height | Set a specific height for the entire component | string | Optional |
| viewOnly | Send true
if you would like for content shown not to be editable. | boolean | Optional |
| placeholder | Send a valid javascript object to be shown once when component is mounted | object | Optional |
| onChange | Whenever onBlur
event takes place it will return content values | object | Optional |
Built With
Authors
License
This project is licensed under the MIT License - see the LICENSE.md file for details.