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 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:
;;
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 = ; 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. ; const handleSubmit = const doWhateverYouWant = props; ; // Do whatever you want with the form data return <Form = = = = > <label>Email :</label> <Field ="email" = /> <FieldError ="email" /> <button ="submit">Submit</button> </Form> ;
Same example using a class component:
state = formData: email: '' { // 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; } { const doWhateverYouWant = thisprops; const formData = thisstate; ; // Do whatever you want with the form data } { <Form = = = = > <label>Email :</label> <Field ="email" = /> <FieldError ="email" /> <button ="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