https://github.com/zhyd1997/use-form-hooks

useForm hooks for controlled components.
https://github.com/zhyd1997/use-form-hooks

form form-validation forms hacktoberfest react react-hooks

Last synced: 2 months ago
JSON representation

useForm hooks for controlled components.

• Host: GitHub
• URL: https://github.com/zhyd1997/use-form-hooks
• Owner: zhyd1997
• License: mit
• Created: 2021-10-01T14:10:07.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-07T13:38:00.000Z (over 3 years ago)
• Last Synced: 2025-10-11T08:28:04.642Z (8 months ago)
• Topics: form, form-validation, forms, hacktoberfest, react, react-hooks
• Language: TypeScript
• Homepage:
• Size: 2.95 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

![NPM](https://img.shields.io/npm/l/@zhyd1997/use-form-hooks)

![npm (scoped)](https://img.shields.io/npm/v/@zhyd1997/use-form-hooks)

[![codecov](https://codecov.io/gh/zhyd1997/useForm/branch/main/graph/badge.svg?token=8VLNN86IK0)](https://codecov.io/gh/zhyd1997/useForm)

![npm](https://img.shields.io/npm/dw/@zhyd1997/use-form-hooks?style=for-the-badge)

![npm](https://img.shields.io/npm/dm/@zhyd1997/use-form-hooks?style=for-the-badge)

![npm](https://img.shields.io/npm/dt/@zhyd1997/use-form-hooks?style=for-the-badge)

> Design useForm hooks and related components.

Demo: [CodeSandbox](https://codesandbox.io/s/blissful-browser-fop66?file=/src/components/BusinessForm.tsx)

# Features

- Support 4 types of input elements: `text`, `email`, `password` and `select`;

- Controlled Components;

- Validate form using [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation).

# Install

```bash

  # using npm

  npm install @zhyd1997/use-form-hooks

  # or using yarn

  yarn add @zhyd1997/use-form-hooks

```

# Usage

```jsx

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

    username: "",

    email: "",

    role: "",

    password: ""

  });

  const onSubmit = () => {

    alert(JSON.stringify(values));

  };

  return (

    


      

        

        

        

        

        

          Submit

        

      

    

  );

}

```


# 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`.