React Schema Viewer takes a schema ('json' | 'joi') as input and uses it to generate comprehensible views
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

react-schema-viewer


React Schema Viewer takes a schema as input and uses it to generate comprehensible views. It has full support for Joi and JSON schema (version 3 and 4).

SchemaTable

Props

Property Type Required? Description
schema Object A JSON schema object.
headerBackgroundColor string - The header background color given that a schema title is provided. Default: 'rgb(245, 245, 245)'.
maxHeight string - Max height of the panel. Default: '100%'.

JoiSchemaTable

Props

Property Type Required? Description
schema Object A Joi schema object.
headerBackgroundColor string - The header background color given that a schema title is provided. Default: 'rgb(245, 245, 245)'.
maxHeight string - Max height of the panel. Default: '100%'.

Usage

react-schema-viewer is an ES-compatible module, so it can be imported as expected. If you want to use it with CJS require, you'll need to use the .default property to access the default exports:

Example: Importing SchemaTable

// CJS require
const SchemaTable = require('react-schema-viewer/lib/SchemaTable').default;

// ES module
import SchemaTable from 'react-schema-viewer/lib/SchemaTable';

Example: Rendering a JSON schema:

import React from 'react';
import { render } from 'react-dom';
import SchemaTable from 'react-schema-viewer/lib/SchemaTable';

const jsonSchema = {
  'title': 'Person',
  'type': 'object',
  'properties': {
    'firstName': {
      'type': 'string'
    },
    'lastName': {
      'type': 'string'
    },
    'age': {
      'description': 'Age in years',
      'type': 'integer',
      'minimum': 0
    }
  },
  'required': ['firstName', 'lastName']
};

render((
  <SchemaTable schema={jsonSchema} />
), document.getElementById('root'));

Example: Rendering a Joi object schema:

import React from 'react';
import { render } from 'react-dom';
import JoiSchemaTable from 'react-schema-viewer/lib/JoiSchemaTable';

joi.object({
  firstName: joi.string().required(),
  lastName: joi.string().required(),
  age: joi.number().integer().min(0).description('Age in years'),
}).label('Person');

render((
  <JoiSchemaTable schema={joiSchema} />
), document.getElementById('root'));

Development and Contributing

This repository uses Neutrino and neutrino-preset-react-components for developing, previewing, and building React components. To get started:

  • Fork and clone this repo.
  • Install the dependencies with yarn.
  • Start the development servers with yarn start.
  • Use CTRL-C to exit the development server.
  • Use yarn build to generate the compiled component for publishing to npm.

Feel free to open an issue, submit a pull request, or contribute however you would like. Understand that this documentation is still a work in progress, so file an issue or submit a PR to ask questions or make improvements. Thanks!

License

react-schema-viewer is released as MPL 2.0.