npmpackage.info

react-json-edit

JSON editor for React

0.3.1

MIT

JavaScript

12.69 kB

55,180 3.3

Installations

npm install react-json-edit

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

7.6.0

NPM Version

5.0.4 Score

48.5

Supply Chain

Quality

74.8

Maintenance

Vulnerability

99.6

License

Pull Requests

Open

4

Total

36

Closed

6

Merged

26

Issues

Open

0

Total

2

Closed

2

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 2 Contributors

Languages

JavaScript

CSS

HTML

JavaScript (98.18%)

CSS (1.56%)

HTML (0.26%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

Eightyplus

Download Statistics

Total Downloads

55,180

Last Day

Last Week

Last Month

255

Last Year

5,868

GitHub Statistics

MIT License

11 Stars

139 Commits

5 Forks

2 Watchers

8 Branches

2 Contributors

Updated on Aug 20, 2023

Bundle Size

49.18 kB

Minified

12.69 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.3.1

Package Id

react-json-edit@0.3.1

Size

12.14 kB

NPM Version

5.0.4

Node Version

7.6.0

Total Downloads

Cumulative downloads

Total Downloads

55,180

Last Day

Compared to previous day

Last Week

-27.8%

Compared to previous week

Last Month

24.4%

255

Compared to previous month

Last Year

50.6%

5,868

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

merge prop-types react react-dom

Dev Dependencies

babel-core babel-loader babel-plugin-react-transform babel-plugin-transform-react-jsx babel-preset-es2015 babel-preset-react babel-preset-react-hmre babel-preset-stage-0 css-loader npm-install-webpack-plugin webpack webpack-dev-server

react-json-editor

JSON editor for React

Install

How to use

import JsonEditor component

import { JsonEditor } from 'react-json-edit';

Add to render method and supply a callback method

1class MyComponent extends Component {
2
3  constructor(props) {
4    super(props);
5    this.state = {
6      json: undefined /*  setup here or load elsewhere */
7    }
8  }
9  
10  callback = (changes) => {
11    this.setState({json: changes});
12  };
13
14  render() {
15    return (
16      <div>
17        <JsonEditor value={this.state.json} propagateChanges={this.callback}/>
18      </div>
19    );
20  }
21}

Parse

It possible to parse and see errorMessage from parsing with the following helper method

1import { parse } from 'react-json-edit';
2
3load_callback(text) {
4   const parsed = parse(text);
5
6   if(parsed.json === undefined) {
7       this.setState({message: parsed.errorText});
8   } else {
9       this.setState({json: parsed.json, message: undefined});
10   }
11}
12
13render() {
14  return (
15   <div>
16     <JsonEditor value={this.state.json} propagateChanges={this.callback}/>
17     <span>{this.state.message}</span>
18   </div>
19  );
20}

Styling

I decided to use inline styling, due to troubles with Isomorphic rendering. The styling can be changed with a props on JsonEditor or via css.

<JsonEditor styling={ ... object } where the following keys can be set: root, array, object, object-row, array-row, value, key, string, number, undefined, boolean, null, button, add-group (AddButton), add-input, add-button, save-button, cancel-button, delete-button. Remember that React uses different style names than css does.

or the css class names (which trumps inline style!): JsonEditor, ArrayItem, ObjectItem, ArrayRow, ObjectRow, KeyItem, StringItem, NumberItem, BooleanItem,

Editor elements: AddButton, AddInput, add-input, add-button, save-button, cancel-button, delete-button,

Table like style

Add props tableLike={true} to view json in a table.

1  render() {
2    return (
3      <div>
4        <JsonEditor value={this.state.json} tableLike={true} propagateChanges={this.callback}/>
5      </div>
6    );
7  }

TODO

Test!
More setup options

Number of levels
Configure add buttons
Schema for adding stuff

Eventually built in text editor where result is parsed automatically

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

7

SAST

Determines if the project uses static code analysis.

1

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.3

/10

Last Scanned on 2025-02-10

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-json-edit

json-edit-react

1.22.2

React component for editing or viewing JSON/object data

react-json-editor-ajrm

2.5.14

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

@types/react-json-editor-ajrm

2.5.6

TypeScript definitions for react-json-editor-ajrm

react-json-edit-criss

0.3.2

JSON Editor for React