jsoneditor-react
react wrapper implementation for josdejong/jsoneditor
Caution
This fork updates "value" of the jsoneditor on props change. Could be buggy.
Please use the original fork if you don't know what you are doing.
Installation
npm install --save jsoneditor jsoneditor-react-controlled
jsoneditor-react
using minimalist version of jsoneditor
to minimize flat bundle size, so if you want to use Ajv or Ace Editor install them as well
Usage
;;
later in render method:
{ return <Editor = = /> ;}
If you want use with Ajv:
import Ajv from 'ajv'; const ajv = allErrors: true verbose: true ; ... { return <Editor = = = = /> ;}
If you want use with Ace Editor:
import ace from 'brace';import 'brace/mode/json';import 'brace/theme/github'; ... { return <Editor = = = ="ace/theme/github" = /> ;}
Or:
import 'brace';import 'brace/mode/json';import 'brace/theme/github'; ... { return <Editor = = ="ace/theme/github" = /> ;}
Or define your own ace theme
Async component
If you using webpack and es6 dynamic imports you can load jsoneditor-react
asynchronously.
You can use react-imported-component or your own implementation
; const JsonEditor = ;
Or with Ajv and Ace Editor:
const JsonEditor = ;
Playground
You can view usage of jsoneditor-react
using our storybook.
Steps to run storybook
- fork or clone repository
npm install
npm run dev
- View
http://localhost:9001
Right now only one story exporting in storybook: /stories/Editor.jsx
, to add more use /.storybook/config.js
Api
Working on docs
folder.
Right now you can use props declaration
Test
Will be soon!😁