Form

JSON Editor

A JSON editor is a text area where users can enter and edit data in JSON format.
View source
1
import {JSONEditorConnected, JSONToString} from '@coveord/plasma-react';
2


3
const defaultValue = JSONToString({hello: 'world', thisIsANumber: 42, andThisAMap: {a: 'a', b: 'b'}});
4


5
export default () => {
6
    const logValue = (value: string) => console.log(value);
7
    return <JSONEditorConnected id="example-1" defaultValue={defaultValue} onChange={logValue} />;
8
};

Props

NameTypeDefaultDescription
classNamestring
CSS classes to add on the editor
collapsibleIdstring
If rendered inside a Collapsible component, you need to specify the collapsible id otherwise the editor might not be showing its content properly
containerClassesstring[]
CSS classes to add on the container element
defaultValuestring
initial value of the component
errorMessagestring
Error to display when there is an error parsing the JSON
idstring
The unique identifier that will be used to retrieve the value from the PlasmaState
onChange(json: string, inError: boolean) => void
A callback function executed when the content of the editor changes
  • code–The content of the editor after the change
  • inError–Wheter there was an error while parsing the JSON
optionsEditorConfiguration
Additional editor options
readOnlyboolean
When true, the content of the editor will not be editable
valuestring
The text value of the JSON editor

Examples

Read only
1
import {JSONEditorConnected, JSONToString} from '@coveord/plasma-react';
2


3
const defaultValue = JSONToString({hello: 'world', thisIsANumber: 42, andThisAMap: {a: 'a', b: 'b'}});
4


5
export default () => <JSONEditorConnected id="example-2" defaultValue={defaultValue} readOnly />;
Error Message
Custom error message when JSON is invalid
1
import {JSONEditorConnected} from '@coveord/plasma-react';
2


3
const invalidJSON = '{hello: world}';
4


5
export default () => (
6
    <JSONEditorConnected
7
        id="example-3"
8
        defaultValue={invalidJSON}
9
        errorMessage="Custom error message when JSON is invalid"
10
    />
11
);
Selector
1
import {useSelector} from 'react-redux';
2
import {JSONEditorConnected, JSONToString, JSONEditorSelectors, PlasmaState} from '@coveord/plasma-react';
3


4
const defaultValue = JSONToString({hello: 'world', thisIsANumber: 42, andThisAMap: {a: 'a', b: 'b'}});
5


6
export default () => {
7
    const content = useSelector((state: PlasmaState) => JSONEditorSelectors.getValue(state, 'example-4'));
8
    return (
9
        <>
10
            {content}
11
            <JSONEditorConnected id="example-4" defaultValue={defaultValue} />
12
        </>
13
    );
14
};

No guidelines exist for JSONEditorConnected yet.

Create guidelines