@kevinwolf/formal-web

💻 Web extension for @kevinwolf/formal.

Table of Contents

- Install
- Usage
- Tips
- Extended documentation

Install

``shell
yarn add @kevinwolf/formal-web
`

Usage

`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 (


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 (


`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 (


Extended documentation

For extended documentation, examples and contributing guidelines, please refer to the monorepo containing this package.