rfajarachmad/jsonschema-editor-react

A react module for maintaining json schema. Built with Chakra-UI

json-schema-editor - A React Component

➕ ➕ ➕

Description

JSON Schema is hypermedia ready, and ideal for annotating your existing JSON-based HTTP API. JSON Schema documents are identified by URIs, which can be used in HTTP Link headers, and inside JSON Schema documents to allow recursive definitions. - json-schema.org

JsonSchemaEditor is a React component library that allows the easy generation of valid Draft 07 JsonSchema from a UI, so that it can be easily persisted in a schema management system.

Benefits include:

• Describes your existing data format(s).
• Provides clear human- and machine- readable - documentation.
• Validates data which is useful for:
  • Automated testing.
  • Ensuring quality of client submitted data.

Documentation

Control documentation and demo can be viewed here

Install

npm install @optum/json-schema-editor

or

yarn add @optum/json-schema-editor

Props

property	type	description	default
data	object	the initial data for the editor	{}
readOnly	boolean	make editor read only	false
onSchemaChange	callback (results: string) => void	callback method to capture changes to schema	required (no default)

Usage

import JsonSchemaEditor from "@optum/json-schema-editor";

export const printIt = (schema) => {
  console.log(schema);
};

function App() {
  return (
    <div className="App">
      <JsonSchemaEditor onSchemaChange={printIt} />
    </div>
  );
}

export default App;

License

jsonchema-editor-react is Copyright © 2021 Optum. It is free software and may be redistributed under the Apache 2.0 license.

Development

Commands

Run storybook

npm run storybook

Create docs and build for release

npm run build-storybook

Run tests locally

npm test

Build dist

npm run build