useRef + forwardRef での型解決

forwardRefを使って作成したコンポーネントのrefをいい感じにexportしたい。

調べたけどわざわざコンポーネントとRefの２つに分けてexportする方法しか調べられなかったけど、ひとまずはこれでワークするのでメモしておく。

// my-button.tsx
import { Button } from "@3rd-party-lib";
export { Button as MyButtonRef };
export const MyButton = React.forwardRef<Button, Props>((props, ref) => {
  //...
  return <Button ref={ref}>{...}</Button>
});

// app.tsx
import { MyButton, MyButtonRef } from "~/MuButton";
const App = () => {
  const ref = useRef<MyButtonRef>(null);
  // ...
  return(
    <div>
      <MyButton ref={ref}>Awesome</MyButton>
    </div>
  )
}