use-form

Reactで、formやinputを利用する際に便利なライブラリです。入力値チェックやフォームの状態管理を簡単に行うことができます。 簡単に導入でき、他のnpmライブラリへの依存はありません。

This is a convenient library for using form and input in React. You can easily perform input value checks and form state management.

import { useForm } from '@maskedeng-tom/use-form';

////////////////////////////////////////////////////////////////////////////////

interface InputFormProps {
  email: string;
  password: string;
  confirmPassword: string;
  terms: string[];
}

const Sample = () => {

  const uf = useForm<InputFormProps>({
    options: {
      email: { required: true },
      password: { required: true, minLength: 8 },
      confirmPassword: { required: true },
      terms: { required: true },
    },
    validate: (v: InputFormProps) => {
      return v.password === v.confirmPassword;
    }
  });

  const onSubmit = (v: InputFormProps) => {
    console.log('------->', v);
  };

  return (<>
    <form {...uf.form(onSubmit)}>

      <fieldset>
        <legend>Create Account</legend>
        <div>
          <label>
            <div>Email</div>
            <input {...uf.email('email')} />
          </label>
        </div>
        <div>
          <label>
            <div>Choose password</div>
            <input {...uf.password('password')} />
          </label>
        </div>
        <div>
          <label>
            <div>Confirm password</div>
            <input {...uf.password('confirmPassword')} />
          </label>
        </div>
        <div>
          <label>
            <input {...uf.checkbox('terms')} value="terms"/>
            I accept the <a href="#">terms</a>
          </label>
        </div>
        <div>
          <button type="submit" disabled={uf.isInvalid}>Create Account</button>
        </div>
      </fieldset>

      <fieldset>
        <legend>debug</legend>
        email : {uf.invalid['email']}<br/>
        password : {uf.invalid['password']}<br/>
        confirmPassword : {uf.invalid['confirmPassword']}<br/>
        terms : {uf.invalid['terms']}<br/>
        validate : {uf.validateError}<br/>
      </fieldset>

    </form>
  </>);
};

export default Sample;

Prerequisites

React hooksライブラリーなので、React Version 16.8以降に対応しています。Typescriptにも対応しています。

This is a React hooks library, so it is compatible with React version 16.8 and above. It also supports TypeScript.

Table of contents

Getting Started

適当なReactを用意してください。関数コンポーネントを利用するため、React Version 16.8以降が必要です。 すでに作成済みのReactプロジェクトにも適用できます。作成済みのReactプロジェクトへの導入にあたって、破壊的な変更は行われません（React本体以外への依存はありません）。

シンプルなReactプロジェクトの作り方については、以下を参考にしてください。 Getting Started with a Simple React Project

Please prepare a suitable React project. React version 16.8 or above is required to use function components. It can also be applied to existing React projects. There will be no destructive changes when introducing it to an existing React project (no dependencies on anything other than React itself). Please refer to the following for instructions on how to create a simple React project. Getting Started with a Simple React Project

Installation

Using npm (npmを利用する場合)

npm install @maskedeng-tom/use-form

Using yarn (yarnを利用する場合)

yarn add @maskedeng-tom/use-form

Usage

Contributing

CONTRIBUTING.mdをお読みください。ここには行動規範やプルリクエストの提出手順が詳細に記載されています。

1. フォークする
2. フィーチャーブランチを作成する：git checkout -b my-new-feature
3. 変更を追加：git add .
4. 変更をコミット：git commit -am 'Add some feature'
5. ブランチをプッシュ：git push origin my-new-feature
6. プルリクエストを提出 :sunglasses:

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Add your changes: git add .
4. Commit your changes: git commit -am 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request :sunglasses:

Credits

昨今の複雑化していく開発現場にシンプルな力を！ :muscle:

Simplify the complex development landscape of today! :muscle:

Authors

Maskedeng Tom - Initial work - Maskedeng Tom

:smile: プロジェクト貢献者リスト :smile:

See also the list of contributors who participated in this project.

Show your support

お役に立った場合はぜひ :star: を！

Please :star: this repository if this project helped you!

License

MIT License © Maskedeng Tom