NOTE: This library is currently (since 02.01.2019 - today) unmaintained. You may want to look around for an alternative until a new maintainer can be found.
A stylish, editor-like, modular, react component for viewing, editing, and debugging javascript object syntax!
- Using node package manager:
$ npm i --save react-json-editor-ajrm
import JSONInput from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';
<JSONInput
id = 'a_unique_id'
placeholder = { sampleObject }
colors = { darktheme }
locale = { locale }
height = '550px'
/>
Hint: There are two different root paths: react-json-editor-ajrm and react-json-editor-ajrm/es. The first contains polyfilled ES5 code, the second unpolyfilled ES6. The react-json-editor-ajrm/es version is not compatible with create-react-app. If you are unsure of which one you need/want, pick the first - it has the best compatibility with tools and browsers.
The ./examples folder contains two examples:
- webpack-project - A basic example without much overload
- create-react-app-project - A small example using the create-react-app template
- Fork and/or clone this Github repository
- Go to an example project under react-json-editor-ajrm/example:
$ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
- Install example project dependencies:
$ npm i
- Serve sample website to port 8080:
$ npm start
- Open
http://localhost:8080in the web browser
- EsLint added to project.
- Fixed security vulnerability alert.
- Collapsible nodes to partially display contents of an object.
- Even more QA tests.
- 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
placeholderproperty to display after component mounts. - For any valid textContent, calculates and makes available in this.state as plain text, markup text, and javascript object.
- Locale support for
English,German,Spanish,Chinese,French,Indonesian,Russian,Hindi,JapaneseandTamil.
| Name | Description | Type | Required |
|---|---|---|---|
| locale | The locale of your editor. Import locales like this: import locale from 'react-json-editor-ajrm/locale/en'. Learn More |
object | Mandatory |
| id | An optional id to assign to the actual text input DOM node. Asides the from the text input, the following nodes will also receive an id: {id}-outer-box, {id}-container, {id}-warning-box, {id}-labels |
string | Optional |
| placeholder | Send a valid javascript object to be shown once the component is mounted. Assign a different value to have the component's initial content re-rendered. | object | Optional |
| reset | Send true to have component always re-render or 'reset' to the value provided on the placeholder property. |
boolean | Optional |
| viewOnly | Send true if you would like for content shown not to be editable. |
boolean | Optional |
| onChange | Whenever onBlur or onKeyPress events take place, it will return content values. |
object | Optional |
| confirmGood | Send false if you would like for the checkmark to confirm good syntax to be hidden. |
boolean | Optional |
| height | A shorthand property to set a specific height for the entire component. | string | Optional |
| width | A shorthand property to set a specific width for the entire component. | string | Optional |
| onKeyPressUpdate | Send false if you would like for component not to automatically update on key press. |
boolean | Optional |
| waitAfterKeyPress | Amount of milliseconds to wait before re-rendering content after keypress. Value defaults to 1000 when not specified. In other words, component will update if there is no additional keystroke after the last one within 1 second. Less than 100 milliseconds does not makes a difference. |
number | Optional |
| modifyErrorText | A custom function to modify the component's original warning text. This function will receive a single parameter of type string and must equally return a string. |
function | Optional |
| theme | Specify which built-in theme to use. | string | Optional |
| colors | Contains the following properties: | object | Optional |
| colors.default | Hex color code for any symbols, like curly braces, and comma. |
string | Optional |
| colors.string | Hex color code for tokens identified as string values. |
string | Optional |
| colors.number | Hex color code for tokens identified as integeter, double, or float values. |
string | Optional |
| colors.colon | Hex color code for tokens identified as colon. |
string | Optional |
| colors.keys | Hex color code for tokens identified as keys or property names. |
string | Optional |
| colors.keys_whiteSpace | Hex color code for tokens identified as keys wrapped in quotes. |
string | Optional |
| colors.primitive | Hex color code for tokens identified as boolean values and null. |
string | Optional |
| colors.error | Hex color code for tokens marked with an error tag. |
string | Optional |
| colors.background | Hex color code for component's background. | string | Optional |
| colors.background_warning | Hex color code for warning message displaying at the top in component. | string | Optional |
| style | Contains the following properties: | object | Optional |
| style.outerBox | Property to modify the default style of the outside container div of component. | object | Optional |
| style.container | Property to modify the default style of the container of component. |
object | Optional |
| style.warningBox | Property to modify the default style of the container div of the warning message. | object | Optional |
| style.errorMessage | Property to modify the default style of the warning message. | object | Optional |
| style.body | Property to modify the default style of the container div of row labels and code. | object | Optional |
| style.labelColumn | Property to modify the default style of the container div of row labels. | object | Optional |
| style.labels | Property to modify the default style of each row label. | object | Optional |
| style.contentBox | Property to modify the default style of the container div of the code. | object | Optional |
outerBox
+-- container
+--- warningBox
+---- errorMessage
+--- body
+---- labelColumn
+----- labels
+---- contentBox
+----- auto generated markup
Whenever RJEA re-renders its content, any function passed onto onChange property will receive a single object parameter with the following keys and values:
| Key | Description |
|---|---|
| plainText | A string representation of then content which includes linebreaks and indentation. Great to console.log() |
| markupText | A string representation of the auto-generated markup used to render content. |
| json | A JSON.stringify version of content. |
| jsObject | A javascript object version of content. Will return undefined if the content's syntax is incorrect. |
| lines | Number of lines rendered for content to be displayed. |
| error | Returns false unless the content's syntax is incorrect, in which case returns an object with a token and a line number which corresponds to the location at which error occurred and a reason |
RJEA supports built-in theme. Here is the list.
- React.js
- Babel.js for transpiling.
- Enzyme for react-specific testing utilities.
- Jest for unit testing, also react-specific tests.
- Travis CI for continuous integration.
This project is licensed under the MIT License - see the LICENSE.md file for details.
Thanks goes to these wonderful people 😄:
This project follows the all-contributors specification. Contributions of any kind welcome!