react-plain-json-editor

It provides simple JSON editor for React.
live demo

you can use this either as a Component(PlainJsonEditor) or as a Hook(useJsonEditor).

Install

npm i react-plain-json-editor
or
yarn add react-plain-json-editor

How to use

PlainJsonEditor

note: all properties are optional.

<PlainJsonEditor
	// initial JSON content of the editor. provide it as an object.
	// default: {}
	value={{initial:"value"}}
	// fires every time it successfully parsed into a JSON value.
	// default: empty function
	onChange={handleChange}
	// fires when submit key pressed and successfully parsed.
	// default: empty function
	onSubmit={handleSubmit}
	// trigger keys to emit 'onSubmit'.
	// you can set any combinations of keys that are provided in [Hotkeys.js](https://wangchujiang.com/hotkeys/).
	// default: ["command+enter", "ctrl+enter"]
	submitKeys={["command+s"]}
	//　error string to show if you have any.
	// default: ""
	error=""
	// whether shows inner error(most of the cases it's a parsing error) or not.
	// default: true
	showInnerError={true}
	// custom serialize(string=>JSON) function if you have any.
	// default: JSON.parse
	serializer={JSON.parse}
	// custom deserialise(JSON=>string) function if you have any.
	// default: JSON.stringify(json, null, 2)
	deserializer={json => { return JSON.stringify(json, null, 2) }}
	// format(serialise=>deserialise=>setText) text in the editor after submitting.
	// default: true
	formatAfterSubmit={true}
	// customize styles of each inner element.
	// you can specify "root", "textarea", and "error".
	// if you set the styles, they are merged into default styles(see src/PlainJsonEditor.tsx).
	// default: {}
	styles={{
		textarea: {
			backgroundColor: "rgba(0,0,0,0.8)",
			color: "#CFF",
			padding: 12,
			fontSize: "1.2rem",
			lineHeight: "1.5rem",
			fontFamily: "monospace"
		}
	}}
/>

PlainJsonEditor is enough but if you want to use it more (more!) simple way, there is a hook style useJsonEditor for you.

useJsonEditor

This is useful especially the cases that...

• you want to have full accessibility of textarea
• you want to handle inner(parsing) error by yourself

note: all properties are optional.

function YourComponent = () => {
	// useJsonEditor returns a ref so that you can bind it with your `textarea` element.
	const editorRef = useJsonEditor = ({
		onSubmit = {handleSubmit},
		onError = {handleError},
		// submitKeys = ['command+enter', 'ctrl+enter'],
		// serializer = JSON.parse
	})
	return (
		<textarea
			// bind useJsonEditor hook with an element
			ref={editorRef}
			// if you need onChange event, you can pass it as usual
			onChange={handleChange}
			// other properties are of course valid because it is a normal textarea
			// value=""
		/>
	)
}