Neatly Positioned Magazines
    Wondering what’s next for npm?Check out our public roadmap! »

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

    0.1.3 • Public • Published

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

    @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: "ironman@avengers.io"
    };
     
    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: "ironman@avengers.io"
    };
     
    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.

    Keywords

    none

    Install

    npm i @kevinwolf/formal-web

    DownloadsWeekly Downloads

    434

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    10.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar