/react-json-editor-ajrm

A modular, easy to use, react component, to view, edit, and debug javascript objects.

Primary LanguageJavaScriptMIT LicenseMIT

react-json-editor-ajrm

npm Build Status npm Known Vulnerabilities All Contributors



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';
    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.

Examples

The ./examples folder contains two examples:

  1. webpack-project - A basic example without much overload
  2. create-react-app-project - A small example using the create-react-app template

Testing right away!

  1. Fork and/or clone this Github repository
  2. Go to an example project under react-json-editor-ajrm/example:
    $ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
  1. Install example project dependencies:
    $ npm i
  1. Serve sample website to port 8080:
   $ npm start
  1. Open http://localhost:8080 in the web browser

Latest Spotlight Release Notes [v2.5.12] - October 15, 2020

  1. Fixed import issue.

Upcoming Features

  1. Bug fixes.

Features

  1. Write as if you are in a text editor.
  2. Checks for syntax mistakes and provides feedback; Custom errors can also be overlaid on the editor.
  3. You can customize color palette as you please.
  4. Accepts a javascript object in placeholder property to display after component mounts.
  5. For any valid textContent, calculates and makes available in this.state as plain text, markup text, and javascript object.
  6. Locale support for English, German, Spanish, Chinese, French, Indonesian, Russian, Hindi, Japanese and Tamil.

Component Properties

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 onKeyPress event take place, it will return content values. object Optional
onBlur Whenever onBlur event 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
error Contains the following properties: object Optional
error.reason A string containing a custom error messsage string Optional
error.line A number indicating the line number related to the custom error message number 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

Component Sections

    outerBox
    +-- container
        +--- warningBox
             +---- errorMessage
        +--- body
             +---- labelColumn
                   +----- labels
             +---- contentBox
                   +----- auto generated markup

Content Values

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

Built-In Themes

RJEA supports built-in theme. Here is the list.

Built With

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Contributors

Thanks goes to these wonderful people 😄:


Andrew Redican
📢 💻 🌍 ⚠️
Patrick Sachs
💻 🌍 ⚠️
Allan Kehl
🌍
esbenvb
📖
Markus Petrykowski
💡
Rick Brunstedt
💻
ADirtyCat
🌍

Cédric
🌍
Radit
🌍
asketes
🌍
C.G.Vedant
🤔
Shehbaz Jafri
🌍
Vasantha Kumar R B
🌍
Aditya Periwal
🌍

Alexey Lyakhov
💻
Terence Huynh
💻
Richard Hull
💻
tonynguyenit18
💻

This project follows the all-contributors specification. Contributions of any kind welcome!