『react-use-event-listeners』というカスタムフックをリリースしました

作った

しました。

www.npmjs.com

いますぐ yarn add react-use-event-listeners

これはなに

ReactのhooksスタイルでDOMに対してaddEventListenerするやつです。

Reactで合成イベント(SyntheticEvent)ではないイベントを使いたいときにaddEventListenerでイベント登録しますが、それをラクにやれるカスタムフックです。

使いかた

  useEventListeners(
    {
      eventTarget: currentEventTarget,
      listeners: [
        ['click', countUp],
        ['pointerover', handleOver],
      ]
    },
    [currentEventTarget]
  )

こんな感じに書く。

例によってカウントアップアプリ

実例とコード

API

現行バージョンのv1では

  • 第1引数
    • オブジェクトでeventTargetとlistenersを渡す
  • 第2引数
    • ビルトインのuseEffectの第2引数と同じ配列(DependencyList)
      • 再実行&クリーンナップの条件になる値

というAPIになっています。

いつ使うの

ReactはSyntheticEvent(合成イベント)があるので基本的にはイベントをなんかやるときは<div onClick={handleOnClick}>foo</div>形式でやればOK。この形式でやっていくのがほとんどなはず。

ただaddEventListener形式でイベントをなんかやりたいときは時々あると思っていて、例えばwindowとかイベント対象のNodeが不定な場合(propsから渡ってくるとか)のときはaddEventListener/removeEventListenerしていくことになるという理解でいる。

なのでそういうSyntheticEventじゃムリな場面のときに使えるはずと思って作っています。

↑に貼ったcodesandboxのデモはそういう意味では全く適していなくて、↑のデモのような場面ではSyntheticEventでOK😅

実装について

『react-use-event-listeners』は内部ではお手製の「register-event-listeners」というライブラリを使っています。

github.com

addEventListener/removeEventListenerのUtil関数

1つのイベントターゲットに対して複数のイベントをまとめて登録できて、unRegister() すれば登録していたイベントがremoveEventListenerされるというやつです。

これを用いてuseEffectのクリーンナップ処理にunRegister関数を渡しているので、『react-use-event-listeners』を使っているコンポーネントがunmountされるとremoveEventListenerもされます。

以上です

使えそうな場面があったら

yarn add react-use-event-listeners

して使ってみてください。

あと依存しているregister-event-listenersですが、Tuple型の書きかたが悪いのかTS力が足りないだけなのかコンパイラ側のせいなのかが不明ですがハンドラーの型推論がうまいこと効いていないので困っています。

コントリビュートはいつでも歓迎です。