Warning:

As you may already know, the react-json-editor-ajrm's orignal project is not actively maintained and that it will eventually be deprecated. So I've decided to set an official date for deprecation. The tentative date for this is June 15, 2023.

What does deprecation mean?

• It means the Github project will be archived as read only.
• It means the npm packages will appear deprecated, but it WILL NOT be deleted.
• It means the new project will be available officially on that date.

I would like to thank those who used it in their projects and those who have contributed in some way to the project. I simply no longer wish to maintain this project. It was made in the early days of my software engineer career, and it has not caught up to today's standards nor mine.

But don't fret. I intend to breathe new life into this project rewriting it from the ground up.

I would like to take the learnings of the past, and avoid some of the issues react-json-editor-ajrm currently has. I would also like to highlight the things done well, and I wish to carry on.

I've setup home for this new project here enio. I've also set up a discussion here if you have any questions or comments.

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

3. Install example project dependencies:

    $ npm i

4. Serve sample website to port 8080:

   $ npm start

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

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:

Built-In Themes

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

Built With

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

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!