Create React form from a schema with uniform

Recently I have discovered a new solution for create, manage form in React. Uniform is a React library for building forms from any schema.

Uniform support schemas: GraphQL, JSON schema, Simple schema, Simple schema 2 and write your custom schema. Example for creating a form from a JSON schema:

In GuestSchema.js

import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
import Ajv from 'ajv';

const ajv = new Ajv({ allErrors: true, useDefaults: true });
const schema = {
  title: 'Guest',
  type: 'object',
  properties: {
    firstName: { type: 'string' },
    lastName: { type: 'string' },
    workExperience: {
      description: 'Work experience in years',
      type: 'integer',
      minimum: 0,
      maximum: 100,
    },
  },
  required: ['firstName', 'lastName'],
};



function createValidator(schema: object) {
  const validator = ajv.compile(schema);

  return (model: object) => {
    validator(model);
    return validator.errors?.length ? { details: validator.errors } : null;
  };
}

const schemaValidator = createValidator(schema);
export const bridge = new JSONSchemaBridge(schema, schemaValidator);

In MyForm.js

import React from 'react';
import { AutoForm } from 'uniforms-semantic';

import { bridge as schema } from './GuestSchema';

export function GuestFormBasic() {
  return <AutoForm schema={schema} onSubmit={console.log} />;
}

And the result is:

image.png

Some advantages of Uniform are:

  • Integration with multiple schema type and can create your custom schema
  • Automatically generate UI from the schema
  • Automatically generate validation from the schema
  • Support multiple themes: Antd, Material UI, Boostrap, Semantic UI

Some disadvantages:

  • Don't support field-level validation
  • Don't have many examples

No Comments Yet