Package Exports

react-jsonschema-form-validation

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-jsonschema-form-validation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React JSON Schema Form Validation

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 us ?

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

First define your JSON Schema :

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

Then import as ES6 Module :

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

// ...

Then declare your Form, Field and FieldError components. Pass your schema to the Form as props.

class ExampleForm extends PureComponent {
    // ...
    state = {
        formData,
    };
    
    handleChange = (data) => {
        // data is a of the object formData with properties (and nested properties)
        // updated using immutability pattern for each change occured in the form.
        this.setState({ formData: data });
    }
    
    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

github repos : /53js

🚀 website : 53js.fr