Package Exports

react-json-editor-ajrm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-json-editor-ajrm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 palette used: ``	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

React.js and Vanilla Javascript Javascript, ES5, ES6

Authors

Andrew Redican andrewredican

License

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