Quickly build schema-based forms in React with uniforms
Tags: react, tutorial, webdev
Published: 2020-04-15 15:02:24

---
title: Quickly build schema-based forms in React with uniforms
published: true
date: 2020-03-23 17:30:51 UTC
tags: react, tutorial, webdev
canonical_url: https://blog.logrocket.com/quickly-build-schema-based-forms-in-react-with-uniforms/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3ej4i4blkyostjign2ux.png
---
**Written by [Godwin Ekuma](https://blog.logrocket.com/author/godwinekuma/)**✏️

[uniforms](https://uniforms.tools/) are React libraries for building form-based web UIs from every schema. A schema is a formal representation of data, data types, allowable values, default values, required values, etc. These web UIs are designed for accepting, modifying, and presenting data and are usually embedded within an application.

In this tutorial, we’ll demonstrate how you can use uniforms to efficiently build schema-based forms in React.

## Why do you need uniforms?

Manually writing HTML templates and the logic for data binding is hard, especially in a relatively large application. Forms are even trickier because they usually involve functionalities that are more advanced than [data binding](https://dev.to/bnevilleoneill/form-input-binding-in-vue-1298-temp-slug-8717084), such as validation and submission.

uniforms eliminate the stress of writing templates and the JavaScript logic for data binding. They facilitates form rendering and take care of state management, validation, and submission.

Below are the core features of uniforms, according to the [official documentation](https://uniforms.tools/docs/what-are-uniforms/).

- Automatic forms generation
- Fields capable of rendering every schema
- Helper for creating custom fields with one line
- Inline and asynchronous form validation
- Various schemas integration
- Wide range of themes support

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## How do uniforms work?

uniforms are defined by the following.

1. **Schema**  **—** Compatible schemas include [GraphQL schema](https://graphql.org/learn/schema/), [JSON Schema](https://json-schema.org/), [`uniforms-bridge-simple-schema`](https://www.npmjs.com/package/uniforms-bridge-simple-schema), and [`uniforms-bridge-simple-schema-2`](https://www.npmjs.com/package/uniforms-bridge-simple-schema-2)
2. **Theme** — The theme is a package that contains prestyled form components from any of today’s [popular style librar](https://dev.to/bnevilleoneill/top-10-react-component-libraries-for-2020-4cm7)[ies](https://dev.to/bnevilleoneill/top-10-react-component-libraries-for-2020-4cm7), such as AntDesign, Bootstrap 3, Bootstrap 4, Material Design, Semantic, unstyled HTML, etc.
3. **Schema bridge** — A bridge is a unified schema mapper that uniforms’ internals use to operate on the schema data, validate the form, and generate from errors. uniforms has a predefined schema-to-bridge mapper, [uniforms-bridge-json-schema](https://www.npmjs.com/package/uniforms-bridge-json-schema), that can be used to [create a schema bridge](https://uniforms.tools/docs/uth-bridge-concept/)

## Using uniforms

Let’s say the marketing team at your company wants to collect lead information and you’ve agreed to help. Your task is to use uniforms to create a form for users to contact to the marketing team.

### Installation

To use uniforms, you must first install the dependent packages. We’ll use JSON Schema to specify the data format, Bootstrap 4 as our UI theme, and [Ajv](https://github.com/epoberezkin/ajv) for schema validation.

To install the required packages run the command below.

```jsx
npm install uniforms uniforms-bridge-json-schema uniforms-bootstrap4 bootstrap@4.4.1 ajv
```

### Create a schema

Define the shape of the form by defining a plain JSON, which is a valid part of a JSON Schema.

```jsx
// schema.js

const schema = {
  title: 'Lead Form',
  type: 'object',
  properties: {
    name: { type: 'string' },
    email: { type: 'string' },
    phone: {
      type: 'integer',
      minimum: 0,
      maximum: 100
    },
    reason: {
      type: 'string',
      options: [
        {
          label: 'Product Questions',
          value: 'product-questions'
        },
        {
          label: 'Online Order Support',
          value: 'online-order-support'
        },
        {
          label: 'Sales-support',
          value: 'sales-support'
        },
        {
          label: 'Events',
          value: 'events'
        }
      ]
    },
    message: {
      type: 'string',
      uniforms: {
        component: LongTextField
      }
    }
  },
  required: ['firstName', 'email', 'message']
};
```

### Create a bridge

For uniforms to make use of any schema, you must create a bridge of the schemas.

The following schemas are compatible with `uniforms`.

- `GraphQLBridge` in `uniforms-bridge-graphql`
- `JSONSchemaBridge` in `uniforms-bridge-json-schema`
- `SimpleSchema2Bridge` in `uniforms-bridge-simple-schema-2`
- `SimpleSchemaBridge` in `uniforms-bridge-simple-schema`

```jsx
import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';

const bridge = new JSONSchemaBridge(schema);
```

Though JSON Schema is easy to use with uniforms, it doesn’t come with validation out of the box. You must manually define a validator to use on your contact form.

Let’s use Ajv for validation:

```jsx
import Ajv from 'ajv';

const ajv = new Ajv({ allErrors: true, useDefaults: true });

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

  return model => {
    validator(model);

    if (validator.errors && validator.errors.length) {
      throw { details: validator.errors };
    }
  };
}

const schemaValidator = createValidator(schema);
```

Now that you have a validator, you can include it as part of the bridge.

```jsx
const bridge = new JSONSchemaBridge(schema, schemaValidator);
```

At this point, the `schema.js` file should look like this:

```jsx
import Ajv from 'ajv';
import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
const ajv = new Ajv({ allErrors: true, useDefaults: true });
const schema = {
  title: 'Lead Form',
  type: 'object',
  properties: {
    name: { type: 'string' },
    email: { type: 'string' },
    phone: {
      type: 'integer',
      minimum: 0,
      maximum: 100
    },
    reason: {
      type: 'string',
      options: [
        {
          label: 'Product Questions',
          value: 'product-questions'
        },
        {
          label: 'Online Order Support',
          value: 'online-order-support'
        },
        {
          label: 'Sales-support',
          value: 'sales-support'
        },
        {
          label: 'Events',
          value: 'events'
        }
      ]
    },
    message: {
      type: 'string',
      uniforms: {
        component: LongTextField
      }
    }
  },
  required: ['firstName', 'email', 'message']
};

function createValidator(schema) {
  const validator = ajv.compile(schema);
  return model => {
    validator(model);
    if (validator.errors && validator.errors.length) {
      throw { details: validator.errors };
    }
  };
}
const schemaValidator = createValidator(schema);
const bridge = new JSONSchemaBridge(schema, schemaValidator);
export default bridge;
```

### Add the schema to a form

Uniforms’ theme packages include a component called `AutoForm` that generates a form from the schema.

Pass the schema to `AutoForm` to generate a form.

```jsx
import React from "react";
import "./styles.css";
import { AutoForm, AutoFields, ErrorsField, SubmitField } from 'uniforms-bootstrap4';

import LeadSchema from './schema';
export default function App() {
  return (
    <div className="App">
      <div className="uniforms">
        <AutoForm schema={LeadSchema} onSubmit={(e) => {console.log(e)}}>
          <h4>Have a question? Contact Sales</h4>
          <AutoFields />
          <ErrorsField />
          <SubmitField />
        </AutoForm>
      </div>
    </div>
  );
}
```

![Schema-Based React Form Built With uniforms](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/schema-based-react-form-1.png?resize=720%2C285&ssl=1)

![Schema-Based React Form With Error Prompts](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/schema-based-react-form-error-prompts.png?resize=720%2C402&ssl=1)

## Conclusion

Now you have the basic knowledge you need to create schema-based forms in React using uniforms. The library comes with myriad other prebuilt form elements you can explore in the [uniforms documentation](https://uniforms.tools/docs/api-fields/).

The snippets used in this tutorial come from an [example app](https://codesandbox.io/s/agitated-feynman-itwiy?from-embed). You’re welcome to clone it and play with it yourself.

* * * 
## Full visibility into production React apps 

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, [try LogRocket.](https://www2.logrocket.com/react-performance-monitoring)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eq752g8qhbffxt3hp9t4.png)

[LogRocket](https://www2.logrocket.com/react-performance-monitoring) is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — [start monitoring for free.](https://www2.logrocket.com/react-performance-monitoring)
* * *

The post [Quickly build schema-based forms in React with uniforms](https://blog.logrocket.com/quickly-build-schema-based-forms-in-react-with-uniforms/) appeared first on [LogRocket Blog](https://blog.logrocket.com).