@kevinwolf/formal-web
š» Web extension for @kevinwolf/formal.Table of Contents
Install
yarn add @kevinwolf/formal-web
Usage
import React from "react";
import useFormal from "@kevinwolf/formal-web";
import * as yup from "yup";
const schema = yup.object().shape({
firstName: yup.string().required(),
lastName: yup.string().required(),
email: yup
.string()
.email()
.required()
});
const initialValues = {
firstName: "Tony",
lastName: "Stark",
email: "ironman@avengers.io"
};
export default function App() {
const formal = useFormal(initialValues, {
schema,
onSubmit: values => console.log("Your values are:", values)
});
return (
<form {...formal.getFormProps()}>
<div>
<label htmlFor="firstName">First Name</label>
<input {...formal.getFieldProps("firstName")} type="text" />
{form.errors.firstName && <div>{form.errors.firstName}</div>}
</div>
<div>
<label htmlFor="lastName">Last Name</label>
<input {...formal.getFieldProps("lastName")} type="text" />
{form.errors.lastName && <div>{form.errors.lastName}</div>}
</div>
<div>
<label htmlFor="email">Email</label>
<input {...formal.getFieldProps("email")} type="text" />
{form.errors.email && <div>{form.errors.email}</div>}
</div>
<button {...formal.getSubmitButtonProps()} type="submit">
Submit
</button>
</form>
);
}
Tips
As you can see, the above code became a little verbose due to the repetition of the fields code, in order to abstract that repeated code, you can create aField
component and replace all those calls in App.js.Field.js
import React from "react";
export default function Field({ id, label, error, ...props }) {
return (
<div>
<label htmlFor={id}>{label}</label>
<input id={id} type="text" {...props} />
{error && <div>{error}</div>}
</div>
);
}
App.js
import React from "react";
import useFormal from "@kevinwolf/formal-web";
import * as yup from "yup";
+import Field from './field'
const schema = yup.object().shape({
firstName: yup.string().required(),
lastName: yup.string().required(),
email: yup
.string()
.email()
.required()
});
const initialValues = {
firstName: "Tony",
lastName: "Stark",
email: "ironman@avengers.io"
};
export default function App() {
const formal = useFormal(initialValues, {
schema,
onSubmit: values => console.log("Your values are:", values)
});
return (
<form {...formal.getFormProps()}>
- <div>
- <label htmlFor="firstName">First Name</label>
- <input {...formal.getFieldProps("firstName")} type="text" />
- {form.errors.firstName && <div>{form.errors.firstName}</div>}
- </div>
+ <Field label="First Name" {...formal.getFieldProps("firstName")} />
- <div>
- <label htmlFor="lastName">Last Name</label>
- <input {...formal.getFieldProps("lastName")} type="text" />
- {form.errors.lastName && <div>{form.errors.lastName}</div>}
- </div>
+ <Field label="Last Name" {...formal.getFieldProps("lastName")} />
- <div>
- <label htmlFor="email">Email</label>
- <input {...formal.getFieldProps("email")} type="text" />
- {form.errors.email && <div>{form.errors.email}</div>}
- </div>
+ <Field label="Email" {...formal.getFieldProps("email")} />
<button {...formal.getSubmitButtonProps()} type="submit">
Submit
</button>
</form>
);
}