WEB

yupとreact-hook-formを使用してサインアップフォームを作ってみました〜tailwindcssのダークモードを添えて〜

nap5

2022.09.26

こんにちは。nap5です。

yupとreact-hook-formを使用してサインアップフォームを作ってみましたので、紹介したいと思います。

react-hook-form

React hook for form validation without the hassle

react-hook-form.com

外部サイト

https://react-hook-form.com

yup

GitHub - jquense/yup: Dead simple Object schema validation

Dead simple Object schema validation. Contribute to jquense/yup development by creating an account on GitHub.

外部サイト

https://github.com/jquense/yup

yup-password

GitHub - knicola/yup-password: Yup, dead simple password validation.

Yup, dead simple password validation. Contribute to knicola/yup-password development by creating an account on GitHub.

外部サイト

https://github.com/knicola/yup-password

デモサイトです。

Welcome to tokimeki lion site

this is tokimeki lion site

react-tailwind-react-hook-form-nextjs-app.onrender.com

外部サイト

https://react-tailwind-react-hook-form-nextjs-app.onrender.com

デモコードです。

youthful-wave-6bpdh9 - CodeSandbox

youthful-wave-6bpdh9 by higashi.kota using @emotion/css, @emotion/react, @emotion/server, @emotion/styled, @fontsource/inter, @hookform/resolvers, @mui/material, @tidyjs/tidy, framer-motion

外部サイト

https://codesandbox.io/s/6bpdh9

react-hook-formから提供されているwatchメソッドは便利でした。

このメソッドの存在を知っていれば、なんとかなる気はします。

簡単ですが、以上です。

WEB