7常に私が使用するフックのフォームのフォームコンポーネント

検証によるフォームの構築は退屈で反復的です.それで、私の友人と私は、すべてのコードベースでコードをコピーすることができるように、フォーム入力コンポーネントのライブラリを作成しました.

デモリンク

デモのためにrhf.clarence.linkを訪問してください

YUPデモ

私もYUPを使用して検証を行い、ソースコードと共にhttps://rhf.clarence.link/yupにアクセスできます.

セットアップ

これらの依存関係をインストールする

yarn add react-hook-form @tailwindcss/forms react-icons

optional

yarn add react-datepicker react-dropzone react-select

2 .風を設定する。設定。TowWindCSS /フォームを使用するJS

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

フォーム構造

これはデフォルトのボイラー板です、そして、あなたはform

import { FormProvider, useForm } from 'react-hook-form';

export default function Page() {
  const methods = useForm();
  const { handleSubmit } = methods;

  return (
    <>
      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)}>Inputs Here</form>
      </FormProvider>
    </>
  );
}

デフォルトフォームコンポーネント

1 .テキスト入力

通常のテキスト入力

パスワード入力

パスワードの入力ピーク機能

textarea

正常なtextarea入力

4 . datepicker

DefaultTime , DefaultTar , Locale Langのような便利な小道具を備えたreact-datepickerライブラリの使用

select ( native )

入力を使用して選択

ファイルアップロード

react-dropzoneライブラリを使用して、我々は小道具の選択されたファイル拡張子を指定することができます

select ( select select )

react-selectライブラリを使用して、選択入力を検索できます

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀