@kevinwolf/formal-web
v0.1.3
Published
Elegant form management primitives for the react hooks era
Downloads
1,709
Readme
@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: "[email protected]"
};
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 a Field
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: "[email protected]"
};
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>
);
}
Extended documentation
For extended documentation, examples and contributing guidelines, please refer to the monorepo containing this package.