🎨
Mantineで長押しButtonを実装する
Mantineにはビルトインでかなり豊富なコンポーネントが用意されていますが、
長押しでイベントを発火できるボタンが見当たらなかったため、既存のコンポーネント、フックを組み合わせてサクッと実装しました。
成果物
- 一定時間(Props.durationMs)クリック（タッチ）するとイベント発火
- クリック（タッチ）をやめるかカーソルが外れたらキャンセル→長押しリセット
- デフォルトではイベント発火後ボタンをdisabledに（Props.disabledWhenLongPressedで切り替え）
- （滑らかに表示更新させたかったため）長押し中50msごとに再レンダリング（頻度を抑えたい場合は定数STEP_MSで調整）
使用するMantineコンポーネント
依存パッケージとコード
デモ
StackBlitz
既存のコンポーネントの組み合わせで、かなり簡単に実現できました。
同じようなニーズの方の参考になれば幸いです。
（また、改善点などがあればコメントいただけるとうれしいです。）
Mantineはhooksもかなり充実していて、個人的にはReact開発で手放せない存在になっています。
今後もライブラリ+1で少し便利になるような記事を書ければと思います。
ご覧いただきありがとうございました。
Discussion