Skip to content

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

License

Notifications You must be signed in to change notification settings

Optum/jsonschema-editor-react

Repository files navigation

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