[React+Tailwind] Modal を TypeScript に書き直してみた | 心を無にして始める React

2022-10-08

準備

書き直すベースはこちらの Modal コンポーネントです。

JavaScript

ベースの Modal.js です。

import React, { forwardRef } from 'react';
import {
  Modal as FlowbiteModal,
} from 'flowbite-react';

const Modal = forwardRef((
  {
    children,
    onClose,
    position = "center",
    popup = false,
    root,
    show,
    size,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteModal
      onClose={onClose}
      position={position}
      popup={popup}
      root={root}
      show={show}
      ref={ref}
      size={size}
      {...otherProps}
    >
      {children}
    </FlowbiteModal>
  );
});

const ModalHeader = forwardRef((
  {
    children,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteModal.Header
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteModal.Header>
  );
});

const ModalBody = forwardRef((
  {
    children,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteModal.Body
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteModal.Body>
  );
});

const ModalFooter = forwardRef((
  {
    children,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteModal.Footer
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteModal.Footer>
  );
});

export default Object.assign(Modal, {
  Header: ModalHeader,
  Body: ModalBody,
  Footer: ModalFooter,
});

TypeScript

Modal.tsx として編集します。

import React, { ComponentProps, forwardRef } from 'react';
import {
  Modal as FlowbiteModal,
  ModalProps as FlowbiteModalProps,
} from 'flowbite-react';
import { LegacyRef } from 'react';

type ModalProps = {} & FlowbiteModalProps;

const Modal = forwardRef((
  {
    children,
    onClose,
    position = "center",
    popup = false,
    root,
    show,
    size,
    ...otherProps
  }: ModalProps,
  ref: LegacyRef<HTMLDivElement>,
) => {
  return (
    <FlowbiteModal
      onClose={onClose}
      position={position}
      popup={popup}
      root={root}
      show={show}
      ref={ref}
      size={size}
      {...otherProps}
    >
      {children}
    </FlowbiteModal>
  );
});

type ModalHeaderProps = {} & ComponentProps<typeof FlowbiteModal.Header>;

const ModalHeader = forwardRef((
  {
    children,
    ...otherProps
  }: ModalHeaderProps,
  ref: LegacyRef<HTMLDivElement>,
) => {
  return (
    <FlowbiteModal.Header
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteModal.Header>
  );
});

type ModalBodyProps = {} & ComponentProps<typeof FlowbiteModal.Body>;

const ModalBody = forwardRef((
  {
    children,
    ...otherProps
  }: ModalBodyProps,
  ref: LegacyRef<HTMLDivElement>,
) => {
  return (
    <FlowbiteModal.Body
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteModal.Body>
  );
});

type ModalFooterProps = {} & ComponentProps<typeof FlowbiteModal.Footer>;

const ModalFooter = forwardRef((
  {
    children,
    ...otherProps
  }: ModalFooterProps,
  ref: LegacyRef<HTMLDivElement>,
) => {
  return (
    <FlowbiteModal.Footer
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteModal.Footer>
  );
});

export default Object.assign(Modal, {
  Header: ModalHeader,
  Body: ModalBody,
  Footer: ModalFooter,
});

結果

変化はないので、前と同じ。

はい、できました。