optum / jsonschema-editor-react Goto Github PK

View Code? Open in Web Editor NEW

56.0 7.0 26.0 5.56 MB

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

License: Apache License 2.0

JavaScript 0.16% TypeScript 99.75% SCSS 0.08%

react jsonschema jsonschema-validator chakra-ui jsonschema-generator jsonschema-editor

jsonschema-editor-react's Introduction

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

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

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

jsonschema-editor-react's People

Contributors

Stargazers

Watchers

jsonschema-editor-react's Issues

Unable to import JsonSchema？

Hi,How can I use this react compoment to import a JsonSchema to Override jsonSchema which I was Modifing ?

Question - Does this package use only free components from Chakra UI?

Race condition: onschemaChange get called before the data gets properly loaded

Thank you for the great package!!!

I'm using the JsonSchemaEditor like this:

  handleChange(schema) {    
    if (!isEqual(JSON.parse(schema), JSON.parse(this.props.data))) {
        console.log(this.props);
        this.props.onChange(schema);
      }
  }
      <JsonSchemaEditor
        onSchemaChange={this.handleChange}
        data={JSON.parse(this.props.data)}
      />

Basically the schema gets stored in a state. This state gets updated in case the user edits the currently loaded schema.
There is a race condition that occurs where the state gets updated with the fetched schema, however the schema inside the editor is still empty. The handleChange function gets called and the empty schema overwrites the state. Leaving the SchemaEditor to be empty.

For some reason the handleChange function before the data prop is properly loaded inside the JsonSchemaEditor component.

I hope someone can help with this issue

Unable to use your component with react app

First of all thanks for your work, this component is exactly what i need for my project. However i've encountered an error while trying to use it.

Do you know how can i fix this problem?

Thank you

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
▼ 2 stack frames were expanded.
resolveDispatcher
node_modules/@optum/json-schema-editor/node_modules/react/cjs/react.development.js:1465
useState
node_modules/@optum/json-schema-editor/node_modules/react/cjs/react.development.js:1496
▲ 2 stack frames were expanded.
JsonSchemaEditor
src/index.tsx:39
  36 |  */
  37 | const JsonSchemaEditor = (props) => {
  38 |     const [isAdvancedOpen, setIsAdvancedOpen] = React.useState(false);
> 39 |     const [currentLens, setCurrentLens] = React.useState(new Array());
  40 |     const focusRef = React.createRef();
  41 |     const { onSchemaChange } = props;
  42 |     const onCloseImport = () => {
View compiled
▶ 18 stack frames were collapsed.