react-jsonschema-form-validation

0.5.6 • Public • Published

React JSON Schema Form Validation

npm Code Climate coverage CircleCI Code Climate maintainability MIT

Validate forms with powerful JSON Schema and Ajv !

This library links JSON Schema, Ajv and Form to :

  • describe data model with JSON Schema
  • validate the form data with Ajv
  • display & customize error messages
  • use your own graphical components to build friendly user forms.

Why RJFV ?

  • Simplicity (no extraneous features, just what you need)
  • Performance (AJV is extremely fast ⚡️)
  • Actively maintained
  • The simplest react JSON Schema validation module ever published on npm ! ✌️

Other JSON Schema validation modules published on NPM are often complex, with too much features. That's why we created react-jsonschema-form-validation. You'll just need a schema, a form, some fields, and your data. Nothing more. it's S I M P L E

Our philosophy :

  • focused on validation, not UI
  • highly customizable
  • minimal CSS (15 lines) : just a red color to show error message (can be overriden)

Installation

npm install react-jsonschema-form-validation
yarn add react-jsonschema-form-validation

Getting started

Import modules:

import React, { useState } from 'react';
import { Field, FieldError, Form } from 'react-jsonschema-form-validation';

Define your JSON-Schema:

const demoSchema = {
    type: 'object',
    properties: {
        email: { type: 'string', format: 'email' },
    },
    required: [
        'email',
    ],
};

Declare your Form, Field and FieldError components. Pass your schema to the Form props.

Example using a functional component and React hooks:

const DemoForm = (props) => {
    const [formData, setFormData] = useState({ email: '' });
    
    const handleChange = (newData) => {
        // newData is a copy of the object formData with properties (and nested properties)
        // updated using immutability pattern for each change occured in the form.
        setFormData(newData);
    }
    
    const handleSubmit = () => {
        const { doWhateverYouWant } = props;
        doWhateverYouWant(formData); // Do whatever you want with the form data
    }
 
    return (
        <Form
            data={formData}
            onChange={handleChange}
            onSubmit={handleSubmit}
            schema={demoSchema}
        >
            <label>Email :</label>
            <Field
                name="email"
                value={formData.email}
            />
            <FieldError name="email" />
            <button type="submit">Submit</button>
        </Form>
    );
}

Same example using a class component:

class DemoForm extends PureComponent {
    state = {
        formData: {
            email: '',
        },
    }
    
    handleChange = (newData) => {
        // newData is a copy of the object formData with properties (and nested properties)
        // updated using immutability pattern for each change occured in the form.
        this.setState({ formData: newData });
    }
    
    handleSubmit = () => {
        const { doWhateverYouWant } = this.props;
        const { formData } = this.state;
        doWhateverYouWant(formData); // Do whatever you want with the form data
    }
 
    render() {
        <Form
            data={this.state.formData}
            onChange={this.handleChange}
            onSubmit={this.handleSubmit}
            schema={demoSchema}
        >
            <label>Email :</label>
            <Field
                name="email"
                value={formData.email}
            />
            <FieldError name="email" />
            <button type="submit">Submit</button>
        </Form>
    }
}

🎵 That's all folks !

Examples

We’ve got many examples, from the most simple to the most advanced.

Live examples are available : here

Documentation

📃 Check out our documentation : here

Licence

MIT

About us

📬 contact : contact@53js.fr

follow us : @53jsdev

github repos : /53js

🚀 website : 53js.fr

Dependencies (8)

Dev Dependencies (25)

Package Sidebar

Install

npm i react-jsonschema-form-validation

Weekly Downloads

70

Version

0.5.6

License

MIT

Unpacked Size

66.8 kB

Total Files

22

Last publish

Collaborators

  • 53js