ドラムロールUIで日付を選択するコンポーネントを作ってみた

始めに 日付の選択のUIでよくあるものはカレンダーだと思いますが、スマホアプリではドラムロールUIと呼ばれるスクロールして日付を選ぶものがあります。Webでもライブラリがないか調べたところ、いくつか出てきました。 しかし react-mobile-picker はwheelによるスクロールの移動量が多すぎる問題があり、 vue-drumroll-date-time-picker は操作感は近いものの文字をもうちょっと大きくしたいなどスタイルを調整したいのと、そもそもVue.jsのライブラリなのでReactでは使えない問題がありました。 そこで vue-drumroll-date-time-picker の挙動を参考にしつつ、MUIを使ってドラムロールUIを自作してみたので備忘録としてまとめました。 作ったもの 今回作ったものは以下のコンポーネントを作って、それを組み合わせて最終的に日付選択