edit-vs-json

A JSON editor component for React applications.

• provides on-the-fly JSON syntax highlighting
• provides JSON formatting when you press the enter key
  • automatically wraps strings in quotes when missing
  • automatically adds an object value when a key is entered with no value complement
  • automatically provides closing punctuation to complete open braces, brackets, or quotes
  • adds trailing commas after the previous item as needed
• removes trailing commas and revalidates when focus leaves the Editor
• triggers an optional change event with the current JSON string value and a boolean indicating the validity of the JSON
• triggers an optional key entry event when the Editor detects the user is editing an object key
  • can be used by the parent application to provide autocomplete-like functionality for object keys
  • can be used to restrict the object keys permitted in the Editor

See the demo here

Table of Contents

• Installation
• Usage
• Props

Installation

This module is distributed via npm.

npm install --save edit-vs-json

or

yarn install edit-vs-json

Usage

The Editor component is designed for use in a React application, and has a peer dependency on React.

import { FunctionComponent, useState } from 'react'

import { Editor } from 'edit-vs-json';

const Example: FunctionComponent = () => {
    const [jsonIsValid, setJsonIsValid] = useState(true);

    const handleChange = (currentJsonValue: string, isValid: boolean) => {
      setJsonIsValid(isValid);
    };

    return (
        <Editor
          width="1400px"
          height="400px"
          onChange={handleChange}
          changeDebounceInterval={300}
        />
    );
}

Props

• width
• height
• initValue
• onChange
• changeDebounceInterval
• onKeyEntry
• keyEntryDebounceInterval
• locked

width: string = "100%"

the width of the JSON editor control

height: string = "100%"

the height of the JSON editor control

initValue: string = ""

the initial JSON string value for the Editor

onChange: function(value: string, isValid: boolean)

the JSON editor change event handler, which receives 2 arguments:

• the current JSON string value
• a boolean indicating if the JSON is valid

changeDebounceInterval: number = 500

the debounce interval in ms for the change event

• smaller values result in the change event being triggered more frequently
• larger values cause the change event to be triggered only when editing pauses

onKeyEntry: function(key: string, callback: (key?: string | null) => void)

the key entry event handler

• the key entry event is triggered when the Editor detects the user is editing an object key
• can be used to provide autocomplete-like functionality for keys to the Editor
• can be used to restrict the keys permitted in the Editor
• receives 2 arguments:
  • the key being edited
  • a callback function that updates the key to the specified string

keyEntryDebounceInterval: number = 200

the debounce interval in ms for the key entry event

• smaller values result in the key entry event being triggered more frequently
• larger values cause the key entry event to be triggered only when editing the key pauses

locked: boolean = false

locks the editor when set to true

License

MIT © RichieMillennium