framer-motionライブラリとreact-bootstrapライブラリを組み合わせてモーダルフォームの実装をやってみた～useKeyPressフックを添えて～
こんにちわ。nap5です。
framer-motionライブラリとreact-bootstrapライブラリを組み合わせてモーダルフォームの実装をやってみたので、紹介したいと思います。
framer-motionライブラリはこちらになります。
react-bootstrapライブラリはこちらになります。
バリデーションライブラリにはyupとyup-passwordを使用しています。
デモコードです。
デモサイトです。
useKeyPressフックでエスケープキーを押した際にモーダルが閉じれるのと、オーバーレイをクリックしたときにハンディクロージングできるところが今回のデモのポイントになります。
useKeyPressフックのユースケースの一つにはなったのではないかと思います。
最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。
また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか？