あのぞんブログ

React で複数の ref を 1つのコンポーネントにセットする

2021-07-09

同じ div に useSizeuseHover の両方を使いたいとがあった。
しかしどちらも ref を渡さなければいけなかったのでその方法です。

useCombinedRefs

ref を合成する関数を用意する。

参考:

export const useCombinedRefs = <T extends any>(
  ...refs: Array<Ref<T>>
): Ref<T> =>
  useCallback(
    (element: T) =>
      refs.forEach((ref) => {
        if (!ref) {
          return
        }

        // Ref can have two types - a function or an object. We treat each case.
        if (typeof ref === 'function') {
          return ref(element)
        }

        // As per https://github.com/facebook/react/issues/13029
        // it should be fine to set current this way.
        ;(ref as any).current = element
      }),
    refs
  )

デモ

その他

とはいえライブラリの hook は ref を引数に渡す形が増えているので combineRefs は不要になりそうです。
カスタム hook を作るときはそうするのが親切ですね。


© 2021 あのぞんびより All Rights Reserved