@zhyd1997/use-form-hooks v0.4.1

Design useForm hooks and related components.

Demo: CodeSandbox

Features

• Support 4 types of input elements: text, email, password and select;
• Controlled Components;
• Validate form using Constraint Validation API.

Install

  # using npm
  npm install @zhyd1997/use-form-hooks
  # or using yarn
  yarn add @zhyd1997/use-form-hooks

Usage

import React from "react";
import { useForm, Form, Select, TextField } from "@zhyd1997/use-form-hooks";
import type { SelectProps, TextFieldProps } from "@zhyd1997/use-form-hooks";

function MyForm() {
  const { values, errors, onChange, handleSubmit } = useForm<InitialFormState>({
    username: "",
    email: "",
    role: "",
    password: ""
  });

  const onSubmit = () => {
    alert(JSON.stringify(values));
  };

  return (
    <div>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <TextField {...formState.username} onChange={onChange} />
        <TextField {...formState.email} onChange={onChange} />
        <Select {...formState.select} onChange={onChange} />
        <TextField {...formState.password} onChange={onChange} />
        <button type="submit" className="cta-button">
          Submit
        </button>
      </Form>
    </div>
  );
}

Development

When publishing a new release, you must at most do the 2 things below:

1. update version field in package.json.
2. update the version of package used in examples.