react-json-editor-ajrm

npmpackage.info

Gathering detailed insights and metrics for react-json-editor-ajrm

Other packages similar to react-json-editor-ajrm

@types/react-json-editor-ajrm

2.5.6

TypeScript definitions for react-json-editor-ajrm

react-json-editor-ajrm-example

1.6.9

A simple website to showcase react-json-editor-ajrm component

react-json-editor-ajrm-ts-platform

3.0.7

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

@cto.ai/react-json-editor-ajrm

1.0.2

This repository is a fork of the [React JSON Editor (AJRM)](https://github.com/AndrewRedican/react-json-editor-ajrm) project by [Andrew Redican](https://github.com/AndrewRedican). The original project aimed to provide a versatile JSON editor for React app

Gathering detailed insights and metrics for 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.

Testing right away!

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:8080 in the web browser

Features

Write as if you are in a text editor.

Checks for syntax mistakes and provides feedback; Custom errors can also be overlaid on the editor.

You can customize color palette as you please.

Accepts a javascript object in placeholder property 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, 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

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

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

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`

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

_{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} 💻

Other packages similar to react-json-editor-ajrm

Other packages similar to react-json-editor-ajrm

Installations

Developer Guide

No

CommonJS

16.14.1

8.5.0

Score

Pull Requests

1

99

60

38

Issues

0

136

136

Releases

Languages

Developer

AndrewRedican

Download Statistics

GitHub Statistics

Bundle Size

45.03 kB

13.16 kB

Maintainers

Package Meta Information

Total Downloads

16,352,300

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

What does deprecation mean?

react-json-editor-ajrm

Installing Dependency

How to Use

Examples

Testing right away!

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

Upcoming Features

Features

Component Properties

Component Sections

Content Values

Built-In Themes

Built With

License

Contributors

10

10

0

0

0

0

0

0

0

0

1.7

/10