Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/AndrewRedican/react-json-editor-ajrm

A modular, easy to use, react component, to view, edit, and debug javascript objects.
https://github.com/AndrewRedican/react-json-editor-ajrm

editor javascript json react

Last synced: about 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/AndrewRedican/react-json-editor-ajrm
Owner: AndrewRedican
License: mit
Archived: true
Created: 2017-12-26T00:30:47.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2023-01-29T03:44:54.000Z (almost 2 years ago)
Last Synced: 2024-05-17T08:02:56.935Z (7 months ago)
Topics: editor, javascript, json, react
Language: JavaScript
Size: 1.78 MB
Stars: 354
Watchers: 10
Forks: 122
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

**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](https://github.com/enio-ireland/enio).
I've also set up a [discussion here](https://github.com/enio-ireland/enio/discussions/62) if you have any questions or comments.

# react-json-editor-ajrm

![npm](https://img.shields.io/npm/v/react-json-editor-ajrm.svg) ![Build Status](https://travis-ci.com/AndrewRedican/react-json-editor-ajrm.svg?branch=master) ![npm](https://img.shields.io/npm/dm/react-json-editor-ajrm.svg) [![Known Vulnerabilities](https://snyk.io/test/github/AndrewRedican/react-json-editor-ajrm/badge.svg)](https://snyk.io/test/github/{username}/{repo}) [![All Contributors](https://img.shields.io/badge/all_contributors-15-orange.svg?style=flat-square)](#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';

```

*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`](https://github.com/facebook/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](https://github.com/AndrewRedican/react-json-editor-ajrm/tree/master/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](https://github.com/AndrewRedican/react-json-editor-ajrm/issues/140).

## 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
| -----------------------------
| [locale]()
| [id]()
| [placeholder]()
| [reset]()
| [viewOnly]()
| [onChange]()
| [onBlur]()
| [confirmGood]()
| [height]()
| [width]()
| [onKeyPressUpdate]()
| [waitAfterKeyPress]()
| [modifyErrorText]()
| [error]()
| error.[reason]()
| error.[line]()
| [theme]()
| [colors]()
| colors.[default]()
| colors.[string]()
| colors.[number]()
| colors.[colon]()
| colors.[keys]()
| colors.[keys_whiteSpace]()
| colors.[primitive]()
| colors.[error]()
| colors.[background]()
| colors.[background_warning]()
| [style]()
| style.[outerBox]()
| style.[container]()
| style.[warningBox]()
| style.[errorMessage]()
| style.[body]()
| style.[labelColumn]()
| style.[labels]()
| style.[contentBox]() | Description | Type | Required | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------: | :-------: | | The locale of your editor. Import locales like this: `import locale from 'react-json-editor-ajrm/locale/en'`. [Learn More](https://github.com/AndrewRedican/react-json-editor-ajrm/wiki/Locale-Support) | 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 | | 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 | | Send `true` to have component always re-render or 'reset' to the value provided on the `placeholder` property. | boolean | Optional | | Send `true` if you would like for content shown not to be editable. | boolean | Optional | | Whenever `onKeyPress` event take place, it will return content values. | object | Optional | | Whenever `onBlur` event take place, it will return content values. | object | Optional | | Send `false` if you would like for the checkmark to confirm good syntax to be hidden. | boolean | Optional | | A shorthand property to set a specific height for the entire component. | string | Optional | | A shorthand property to set a specific width for the entire component. | string | Optional | | Send `false` if you would like for component not to automatically update on key press. | boolean | Optional | | 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 | | 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 | | **Contains the following properties:** | object | Optional | | A string containing a custom error messsage | string | Optional | | A number indicating the line number related to the custom error message | number | Optional | | Specify which [built-in theme](https://github.com/AndrewRedican/react-json-editor-ajrm/wiki/Built-In-Themes) to use. | string | Optional | | **Contains the following properties:** | object | Optional | | Hex color code for any symbols, like curly `braces`, and `comma`. | string | Optional | | Hex color code for tokens identified as `string` values. | string | Optional | | Hex color code for tokens identified as `integeter`, `double`, or `float` values. | string | Optional | | Hex color code for tokens identified as `colon`. | string | Optional | | Hex color code for tokens identified as `keys` or property names. | string | Optional | | Hex color code for tokens identified as `keys` wrapped in quotes. | string | Optional | | Hex color code for tokens identified as `boolean` values and null. | string | Optional | | Hex color code for tokens marked with an `error` tag. | string | Optional | | Hex color code for component's background. | string | Optional | | Hex color code for warning message displaying at the top in component. | string | Optional | | **Contains the following properties:** | object | Optional | | Property to modify the default style of the outside container div of component. | object | Optional | | Property to modify the default style of the `container` of component. | object | Optional | | Property to modify the default style of the container div of the warning message. | object | Optional | | Property to modify the default style of the warning message. | object | Optional | | Property to modify the default style of the container div of row labels and code. | object | Optional | | Property to modify the default style of the container div of row labels. | object | Optional | | Property to modify the default style of each row label. | object | Optional | | 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](https://github.com/AndrewRedican/react-json-editor-ajrm/wiki/Built-In-Themes).

## Built With

- [**React.js**](https://reactjs.org/)
- [**Babel.js**](https://babeljs.io/) for transpiling.
- [**Enzyme**](http://airbnb.io/enzyme/) for react-specific testing utilities.
- [**Jest**](https://jestjs.io/docs/en/tutorial-react) for unit testing, also react-specific tests.
- [**Travis CI**](https://travis-ci.org/) for continuous integration.

## License

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

## Contributors

Thanks goes to these wonderful people :smile::

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