Sditor NPM | npm.io

Sditor = S chema + E Ditor

sditor

Introduction

S chema + E Ditor = Sditor

Sditor is a graphical editing component of JSON Schema. It is a React component based on TypeScript, which has very few APIs and can be quickly assembled into any React project.

Installation

npm install sditor -S

How to use

import * as React from "react";
import { Editor, EditorModel } from "sditor";

export class App extends React.Component {
  
  //EditorModel instance
  editorModel: EditorModel;

  onEditorReady = (model:EditorModel)=> {
    //You can set the initial value here.
    model.schema = { ... };
    //Temporary EditorModel instance
    this.editorModel = model;
  }

  onSave = ()=> {
    //Get the current schema through editorModel
    const schema = this.editorModel.schema;
    console.log('schema', schema);
  }

  render () {
    return <div>
      <Editor onReady={this.onEditorReady} style={{height: 500}} />
      <button onClick={this.onSave}>Save</button>
    </div>;
  }
  
}