Reactでコンポーネントにクラス名を付与するだけで動作するバリデーションライブラリを公開しました

TailwindCSS を使用しているうちに、クラス名を付与するだけで動作するバリデーションライブラリを作りたくなったので作りました。
クラス名を付与するだけで動作するのは実装が容易になるだけでなく、ライブラリを使用するためのコンポーネントの修正が少なくて済むメリットも大きいです。

今回作成したのは、簡単な initialize だけ行えば、あとはクラス名の付与だけで動作してくれるバリデーションライブラリ「react-iii-validator」です。
使い方は README.md に記載しているので上記の npm へのリンクからご確認いただくとして、実装時のポイントを書いていきます。

ポイント

クラス名だけで動作する

これは冒頭でも記載しましたが、クラス名だけで動作するので実装者の負担が少ないです。
コンポーネントや DOM要素 の className プロパティにしか影響がないので、このライブラリを動作させるために専用のプロパティを追加する必要が基本的にはありません。

name を指定して特定の要素だけにバリデーションができる

複数のインプットフィールドがある管理画面などで使用する場合、なにかのきっかけで特定のインプットフィールドのみ再バリデーションを行いたい場合があるかと思います。
その際はバリデーションを行うメソッドに name を指定するだけで実現できます。

複数の<form>が同一ページにある場合でも使用できる

initialize を行う際に、引数として form 要素もしくは form 要素の ref.current を渡すことで、そのフォーム内に対してのみバリデーションが動作するようになります。

TypeScript_____例）_____export const SamplePage = () => {
	const Form1Validator = useValidator()
	const Form2Validator = useValidator()
	const form1Ref = useRef()
	const form2Ref = useRef()
	React.useEffect(() => {
		Form1Validator.initialize(form1Ref.current)
		Form2Validator.initialize(form2Ref.current)
	}, [])
	return (
		<form ref='form1Ref'>
			// 省略
		</form>
		<form ref='form2Ref'>
			// 省略
		</form>
	)
}

今後について

まだ基本的なバリデーションしか実装していないので、じわじわと他のバリデーションも追加していきます。
また、シンプルでありたいと思っていますが、現状で増やしたいオプションもあるので、もう少し使い勝手がよくなるようにオプションも少しずつ拡大していきたいと思います。