🎨

Mantineで長押しButtonを実装する

2022/11/13に公開約1,100字

Mantineにはビルトインでかなり豊富なコンポーネントが用意されていますが、
長押しでイベントを発火できるボタンが見当たらなかったため、既存のコンポーネント、フックを組み合わせてサクッと実装しました。


成果物

long-press-button

  • 一定時間(Props.durationMs)クリック(タッチ)するとイベント発火
  • クリック(タッチ)をやめるかカーソルが外れたらキャンセル→長押しリセット
  • デフォルトではイベント発火後ボタンをdisabledに(Props.disabledWhenLongPressedで切り替え)
  • (滑らかに表示更新させたかったため)長押し中50msごとに再レンダリング(頻度を抑えたい場合は定数STEP_MSで調整)

使用するMantineコンポーネント

依存パッケージとコード

https://github.com/yataroon/mantine-long-press-button/blob/main/package.json#L11-L18

https://github.com/yataroon/mantine-long-press-button/blob/main/src/components/LongPressButton.tsx

デモ

StackBlitz

既存のコンポーネントの組み合わせで、かなり簡単に実現できました。
同じようなニーズの方の参考になれば幸いです。
(また、改善点などがあればコメントいただけるとうれしいです。)

Mantineはhooksもかなり充実していて、個人的にはReact開発で手放せない存在になっています。
今後もライブラリ+1で少し便利になるような記事を書ければと思います。

ご覧いただきありがとうございました。

Discussion

ログインするとコメントできます