Numerous Pulsating Martians

    @3rd1t/formal
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.8 • Public • Published

    @kevinwolf/formal @kevinwolf/formal

    @kevinwolf/formal

    👔 Elegant form management primitives for the react hooks era.

    Table of Contents

    Install

    yarn add @kevinwolf/formal

    Usage with React

    Note: this boilerplate can be reduced.

    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 (
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="firstName">First Name</label>
            <input
              type="text"
              id="firstName"
              name="firstName"
              value={formal.values.firstName}
              onChange={e => formal.change("firstName", e.target.value)}
            />
            {formal.errors.firstName && <div>{formal.errors.firstName}</div>}
          </div>
     
          <div>
            <label htmlFor="lastName">Last Name</label>
            <input
              type="text"
              id="lastName"
              name="lastName"
              value={formal.values.lastName}
              onChange={e => formal.change("lastName", e.target.value)}
            />
            {formal.errors.lastName && <div>{formal.errors.lastName}</div>}
          </div>
     
          <div>
            <label htmlFor="email">Email</label>
            <input
              type="text"
              id="email"
              name="email"
              value={formal.values.email}
              onChange={e => formal.change("email", e.target.value)}
            />
            {formal.errors.email && <div>{formal.errors.email}</div>}
          </div>
     
          <button type="submit">Submit</button>
        </form>
      );
    }

    Usage with React Native

    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 (
        <View>
          <View>
            <Text>First Name</Text>
            <TextInput
              value={formal.values.firstName}
              onChangeText={text => formal.change("firstName", text)}
            />
            {formal.errors.firstName && <Text>{formal.errors.firstName}</Text>}
          </View>
     
          <View>
            <Text>Last Name</Text>
            <TextInput
              value={formal.values.lastName}
              onChangeText={text => formal.change("lastName", text)}
            />
            {formal.errors.lastName && <Text>{formal.errors.lastName}</Text>}
          </View>
     
          <View>
            <Text>Email</Text>
            <TextInput
              value={formal.values.email}
              onChangeText={text => formal.change("email", text)}
            />
            {formal.errors.email && <Text>{formal.errors.email}</Text>}
          </View>
     
          <Button onPress={formal.submit} title="Submit" />
        </View>
      );
    }

    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. ✨

    Extended documentation

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

    Keywords

    none

    Install

    npm i @3rd1t/formal

    DownloadsWeekly Downloads

    49

    Version

    0.1.8

    License

    MIT

    Unpacked Size

    21 kB

    Total Files

    11

    Last publish

    Collaborators

    • 3rd1t