# react-json-editor JSON editor for React # Install [![NPM](https://nodei.co/npm/react-json-edit.png)](https://npmjs.org/package/react-json-edit) # How to use * import JsonEditor component `import { JsonEditor } from 'react-json-edit';` * Add to render method and supply a callback method ```javascript class MyComponent extends Component { constructor(props) { super(props); this.state = { json: undefined /* setup here or load elsewhere */ } } callback = (changes) => { this.setState({json: changes}); }; render() { return (

); } } ``` # Parse It possible to parse and see errorMessage from parsing with the following helper method ```javascript import { parse } from 'react-json-edit'; load_callback(text) { const parsed = parse(text); if(parsed.json === undefined) { this.setState({message: parsed.errorText}); } else { this.setState({json: parsed.json, message: undefined}); } } render() { return (

{this.state.message}

); } ``` # 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. ` ); } ``` # TODO 1. Test! 2. More setup options - Number of levels - Configure add buttons - Schema for adding stuff 3. Eventually built in text editor where result is parsed automatically

	Stars	Issues	Version	Updated	Created
edit-json-file	95	2	1.8.0	4 months ago	8 years ago
react-json-edit	11	1	0.3.1	7 years ago	8 years ago
react-json-editor	224	12	0.3.0	7 years ago	8 years ago
winterfell	787	27	1.1.4	7 years ago	9 years ago

edit-json-file vs react-json-edit vs react-json-editor vs winterfell

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past