https://github.com/optum/jsonschema-editor-react
A react module for maintaining json schema. Built with Chakra-UI
https://github.com/optum/jsonschema-editor-react
chakra-ui jsonschema jsonschema-editor jsonschema-generator jsonschema-validator react
Last synced: 5 months ago
JSON representation
A react module for maintaining json schema. Built with Chakra-UI
- Host: GitHub
- URL: https://github.com/optum/jsonschema-editor-react
- Owner: Optum
- License: apache-2.0
- Created: 2020-07-20T16:42:34.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-04T11:51:28.000Z (over 1 year ago)
- Last Synced: 2024-12-09T09:06:32.051Z (5 months ago)
- Topics: chakra-ui, jsonschema, jsonschema-editor, jsonschema-generator, jsonschema-validator, react
- Language: TypeScript
- Homepage:
- Size: 5.43 MB
- Stars: 59
- Watchers: 7
- Forks: 29
- Open Issues: 9
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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](https://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](https://optum.github.io/jsonschema-editor-react/)
## Install
```shell
npm install @optum/json-schema-editor
```
or
```shell
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
```js
import JsonSchemaEditor from "@optum/json-schema-editor";
export const printIt = (schema) => {
console.log(schema);
};
function App() {
return (
);
}
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
```shell
npm run storybook
```
> Create docs and build for release
```shell
npm run build-storybook
```
> Run tests locally
```shell
npm test
```
> Build dist
```shell
npm run build
```