Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-json-editor-ajrm with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactJsonEditorAjrm = require("react-json-editor-ajrm")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-json-editor-ajrm v2.5.9

A stylish, editor-like, modular, react component for viewing, editing, and debugging javascript object syntax!

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.9] - December 8, 2018

  1. EsLint added to project.
  2. Fixed security vulnerability alert.

Upcoming Features

  1. Collapsible nodes to partially display contents of an object.
  2. Even more QA tests.

Features

  1. Write as if you are in a text editor.
  2. Checks for syntax mistakes and provides feedback.
  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

NameDescriptionTypeRequired
localeThe locale of your editor. Import locales like this: import locale from 'react-json-editor-ajrm/locale/en'. Learn MoreobjectMandatory
idAn 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}-labelsstringOptional
placeholderSend 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.objectOptional
resetSend true to have component always re-render or 'reset' to the value provided on the placeholder property.booleanOptional
viewOnlySend true if you would like for content shown not to be editable.booleanOptional
onChangeWhenever onBlur or onKeyPress events take place, it will return content values.objectOptional
confirmGoodSend false if you would like for the checkmark to confirm good syntax to be hidden.booleanOptional
heightA shorthand property to set a specific height for the entire component.stringOptional
widthA shorthand property to set a specific width for the entire component.stringOptional
onKeyPressUpdateSend false if you would like for component not to automatically update on key press.booleanOptional
waitAfterKeyPressAmount 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.numberOptional
modifyErrorTextA 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.functionOptional
themeSpecify which built-in theme to use.stringOptional
colorsContains the following properties:objectOptional
colors.defaultHex color code for any symbols, like curly braces, and comma.stringOptional
colors.stringHex color code for tokens identified as string values.stringOptional
colors.numberHex color code for tokens identified as integeter, double, or float values.stringOptional
colors.colonHex color code for tokens identified as colon.stringOptional
colors.keysHex color code for tokens identified as keys or property names.stringOptional
colors.keys_whiteSpaceHex color code for tokens identified as keys wrapped in quotes.stringOptional
colors.primitiveHex color code for tokens identified as boolean values and null.stringOptional
colors.errorHex color code for tokens marked with an error tag.stringOptional
colors.backgroundHex color code for component's background.stringOptional
colors.background_warningHex color code for warning message displaying at the top in component.stringOptional
styleContains the following properties:objectOptional
style.outerBoxProperty to modify the default style of the outside container div of component.objectOptional
style.containerProperty to modify the default style of the container of component.objectOptional
style.warningBoxProperty to modify the default style of the container div of the warning message.objectOptional
style.errorMessageProperty to modify the default style of the warning message.objectOptional
style.bodyProperty to modify the default style of the container div of row labels and code.objectOptional
style.labelColumnProperty to modify the default style of the container div of row labels.objectOptional
style.labelsProperty to modify the default style of each row label.objectOptional
style.contentBoxProperty to modify the default style of the container div of the code.objectOptional

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:

KeyDescription
plainTextA string representation of then content which includes linebreaks and indentation. Great to console.log()
markupTextA string representation of the auto-generated markup used to render content.
jsonA JSON.stringify version of content.
jsObjectA javascript object version of content. Will return undefined if the content's syntax is incorrect.
linesNumber of lines rendered for content to be displayed.
errorReturns 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 :smile::

| [
Andrew Redican](https://github.com/AndrewRedican)
[📢](#talk-AndrewRedican "Talks") [💻](https://github.com/AndrewRedican/react-json-editor-ajrm/commits?author=AndrewRedican "Code") [🌍](#translation-AndrewRedican "Translation") [⚠️](https://github.com/AndrewRedican/react-json-editor-ajrm/commits?author=AndrewRedican "Tests") | [
Patrick Sachs](https://patrick-sachs.de/)
[💻](https://github.com/AndrewRedican/react-json-editor-ajrm/commits?author=PatrickSachs "Code") [🌍](#translation-PatrickSachs "Translation") [⚠️](https://github.com/AndrewRedican/react-json-editor-ajrm/commits?author=PatrickSachs "Tests") | [
Allan Kehl](https://allankehl.com)
[🌍](#translation-AllanKDeveloper "Translation") | [
esbenvb](https://github.com/esbenvb)
[📖](https://github.com/AndrewRedican/react-json-editor-ajrm/commits?author=esbenvb "Documentation") | [
Markus Petrykowski](http://markus-petrykowski.de)
[💡](#example-PetrykowskiM "Examples") | [
Rick Brunstedt](https://github.com/rickbrunstedt)
[💻](https://github.com/AndrewRedican/react-json-editor-ajrm/commits?author=rickbrunstedt "Code") | [
ADirtyCat](https://github.com/ADirtyCat)
[🌍](#translation-ADirtyCat "Translation") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [
Cédric](https://github.com/cbonaudo)
[🌍](#translation-cbonaudo "Translation") | [
Radit](http://radityasurya.com)
[🌍](#translation-radityasurya "Translation") | [
asketes](https://github.com/askesis)
[🌍](#translation-askesis "Translation") | [
C.G.Vedant](https://github.com/cgvedant)
[🤔](#ideas-cgvedant "Ideas, Planning, & Feedback") | [
Shehbaz Jafri](https://github.com/shehbazjafri)
[🌍](#translation-shehbazjafri "Translation") | [
Vasantha Kumar R B](https://www.linkedin.com/in/vasanthakumarbe)
[🌍](#translation-vasind "Translation") | [
Aditya Periwal](https://github.com/Adityaperiwal)
[🌍](#translation-Adityaperiwal "Translation") | | [
Alexey Lyakhov](https://github.com/JustFly1984)
[💻](https://github.com/AndrewRedican/react-json-editor-ajrm/commits?author=JustFly1984 "Code") |

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free