forwardRefのメモ

import type { ButtonHTMLAttributes, ForwardRefRenderFunction } from 'react';
import { forwardRef } from 'react';


type Ref = HTMLButtonElement;

type Props = {
  disabled?: boolean,
  children: string | JSX.Element,
} & ButtonHTMLAttributes<Ref>;


type RefFunc = ForwardRefRenderFunction<Ref, Props>;

const buttonRefFunc: RefFunc = ({
  disabled = false,
  children = 'button name',
  ...props
}, ref) => (
  <button
    type="button"
    className="flex justify-center items-center p-3 rounded w-full h-14"
    disabled={disabled}
    // eslint-disable-next-line react/jsx-props-no-spreading
    {...props}
    ref={ref}
  >
    { children }
  </button>
);

const Button = forwardRef<Ref, Props>(buttonRefFunc);

export default Button;