ReactのRefをTypeSafeに独自実装する際のまとめ

タイプセーフにReactのRefを独自実装する際、毎回忘れて調べなおしているので覚書

import { forwardRef, ForwardRefRenderFunction, useImperativeHandle } from 'react';

export interface HogeElement {
  bar: string;
  buzz: () => void;
}

export interface HogeProps {
  bizz: string;
}

const HogeRefFunction: ForwardRefRenderFunction<HogeElement, HogeProps> = ({
  bizz,
}, ref)=> {
  useImperativeHandle(ref, () => {
    return {
      bar: '参照等',
      buzz: () => {
        // 処理群
      }
    }
  })
  return <div>{bizz}</div>;
}
export const Hoge = forwardRef(HogeRefFunction);

各種命名規則

• HTMLライクにするため、文末にElementを記述 HogeElement
  • HTMLDivElement的な勢い
• Propsを文末に記述

備考

RefFunctionとコンポーネントを命名しておき、無名化を防ぐ
最終的に型は求まるため、forwardRefでwrapすれば完成