Elegant form management primitives for the react hooks era
npm install @kevinwolf/formal-webš» Web extension for @kevinwolf/formal.
- Install
- Usage
- Tips
- Extended documentation
``shell`
yarn add @kevinwolf/formal-web
`typescript
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 (
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
`typescript
import React from "react";export default function Field({ id, label, error, ...props }) {
return (
{error && {error}}
);
}
`App.js
`diff
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 (
);
}
``For extended documentation, examples and contributing guidelines, please refer to the monorepo containing this package.