ひと夏の技術

しました。

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

README読んでね〜
- GitHub - 1natsu172/react-use-event-listeners: Handling the addEventListener(s) using the hooks.

現行バージョンの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力が足りないだけなのかコンパイラ側のせいなのかが不明ですがハンドラーの型推論がうまいこと効いていないので困っています。

2nd argument type(EventListeners) is broken. · Issue #1 · 1natsu172/register-event-listeners · GitHub

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

LiteralUnion

たまたまSindre氏の型定義集のライブラリ眺めてたところ上記の問題を解決できる便利型が転がっていた。

export type LiteralUnion< LiteralType extends BaseType, BaseType extends Primitive > = LiteralType | (BaseType & {_?: never});

これを使うと…

やった〜

Issue

Issueはここみたいだけどコンパイラ的に解釈できないのでこういう型をいまのところは経由しないとダメみたい。

わりとこのわがままなUnion型をやりたい人は多そうな気がしているけど、ググラビリティが低すぎてみんなたどり着けていないのでは……という気がしている。

この記事もそういう意味ではたどり着けないのかもしれない。ユニオン型orなにかの型みたいなことを、もっとわかりやすく直接脳で解釈できるような言葉で書くの難しい気がする。