ソフトウェア開発者のための OSS、まとめてみました!

ソフトウェア開発を行なっている自分が、個人的に面白いと思ったプログラムの最新技術や、オープンソースソフトウェア(OSS)をまとめています!

MENU

React で 入力フォームの hooks を使いたいなら!「React Hook Form」

概要

みなさんは Web アプリを開発する際はなんのプログラミング言語またはフレームワークをお使いでしょうか?

私は専ら React.js や Next.js を使用しており、それ関連のモジュールなどを利用してアプリなどを開発しています。

ただ、React.js などで利用できるモジュール群はたくさんあり、どのモジュールを利用していけば良いか迷ってしまうことがあります。

そんな中、React.js にフォームコンポーネントを組み込む際に便利なモジュールを見つけましたので、今回はこちらについて紹介しようと思います。

今回ご紹介する OSS は、React.js で利用できるフックで入力フォームを実現することのできる Node モジュール「React Hook Form」になります。

それでは早速中身についてもう少し詳しくみていきましょう!

目次

特徴

特徴としては以下の内容が挙げられていました。

  • パフォーマンス、UX および DX を念頭に置いた設計
  • HTML 形式の入力フォームにも対応

その他にもさまざまな特徴がありますので、詳細について把握したい場合は README をご覧ください。

利用手順

React.js を利用しているなら、以下のコマンドよりモジュールをインストールしてください。

npm install react-hook-form

インストール後、実際にソースコード上で機能を実現する際は以下のようなソースコード例のように実装します。

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

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

使用感

早速自分の方でもこちらの「React Hook Form」を触ってみました!

上記のソースコードをそのまま貼り付けて React.js 上で動作させてみたのが上図になります。

ソースコード例をそのまま載せただけではシンプルすぎますが、React.js でわずか数行記述するだけで簡単に入力フォームを作成することが出来ました!

さらにオプションを追加したり記述を増やすことで立派な入力フォームになるので、もっと組み込んでみたいという方は公式ドキュメントを参照してみてください。

react-hook-form.com

まとめ

今回は React.js で利用できるフックで入力フォームを実現することのできる Node モジュール「React Hook Form」をご紹介しました。

React.js で入力フォームを簡単に作成してみたい方、何か良いモジュールがないか探していた方、ぜひ一度こちらの「React Hook Form」を使用されてみてはいかがでしょうか?

React Hook で簡単に入力フォームを作成することができるので、ストレスフリーでもっと React.js が好きになると思います!

ライセンス

MIT License

リンク

react-hook-form.com

react-hook-form.com

github.com