Schemy Forms
Library for autobuilding React forms using Schemy
.
This is in early development. Not all types are supported yet, and some are buggy. Use carefully.
Basic usage
Login form example
Just create your schema as you usually do, and then render the form
import { Schemy, SchemyForm } from 'schemy-forms';
// Build schema
const loginSchema = new Schemy({
email: { type: String },
password: { type: String }
});
// In your component
return (
<SchemyForm schema={loginSchema} />
);
Customize the fields
There are some extra settings that you can use to customize your form.
import { Schemy, SchemyForm } from 'schemy-forms';
const accountSchema = new Schemy({
name: {
type: String,
label: 'Full name' // You can customize the input label
},
email: {
type: String,
min: 1,
message: 'You must provide an email address'
},
password: {
type: String,
required: true,
isPassword: true, // This tells Schemy to mask the input values
}
});
// ...
return (
<SchemyForm schema={accountSchema} />
);
Some of these settings are not supported by Schemy, so make sure you are using our bundled schemy which has been extended to support them.
Advanced usage
You can also use hooks to have more control over the form
import { useSchemy } from 'schemy-forms';
const RegisterPage = () => {
const { form, values, isValid, isTouched } = useSchemy({
email: { type: String },
password: { type: String, isPassword: true }
});
const handleSubmit = async () => {
await fetch('/some-api', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(values)
});
}
// form contains the generated Form
// You can just include it in your JSX and it will render
return (
<div className="register-page">
<h1>
New Account
<em>{(isTouched) ? 'Unsaved changes' : ''}</em>
</h1>
<div className="form">
{form}
</div>
<div className="footer">
<button disabled={!isValid}>Submit</button>
</div>
</div>
);
}