@kevinwolf/formal

👔 Elegant form management primitives for the react hooks era.

Table of Contents

- Install
- Usage with React
- Usage with React Native
- Reducing boilerplate
- Extended documentation

Install

``shell
yarn add @kevinwolf/formal
`

Usage with React

> Note: this boilerplate can be reduced.

`typescript
import React from "react";
import * as yup from "yup";
import useFormal from "@kevinwolf/formal";

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)
});

const handleSubmit = e => {
e.preventDefault();
formal.submit();
};

return (


`typescript
import React from "react";
import { View, Text, TextInput, Button } from "react-native";
import * as yup from "yup";
import useFormal from "@kevinwolf/formal";

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 (


First Name
value={formal.values.firstName}
onChangeText={text => formal.change("firstName", text)}
/>
{formal.errors.firstName && {formal.errors.firstName}}



Last Name
value={formal.values.lastName}
onChangeText={text => formal.change("lastName", text)}
/>
{formal.errors.lastName && {formal.errors.lastName}}



Email
value={formal.values.email}
onChangeText={text => formal.change("email", text)}
/>
{formal.errors.email && {formal.errors.email}}




);
}
``

Reducing boilerplate

In order to reduce boilerplate, you can install one of two packages depending on whether you are on web or mobile. That way, you will receive some prop getters that you just have to spread to your inputs and buttons. ✨

- @kevinwolf/formal-web
- @kevinwolf/formal-native

Extended documentation

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