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

2022-10-12

準備

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

JavaScript

ベースの Pagination.js です。

import React, { forwardRef } from 'react';
import {
  Pagination as FlowbitePagination,
} from 'flowbite-react';

const Pagination = forwardRef((
  {
    children,
    currentPage,
    layout = 'pagination',
    onPageChange,
    showIcons = true,
    totalPages,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbitePagination
      currentPage={currentPage}
      layout={layout}
      onPageChange={onPageChange}
      showIcons={showIcons}
      totalPages={totalPages}
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbitePagination>
  );
})

export default Pagination;

TypeScript

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

import React, { forwardRef, LegacyRef } from 'react';
import {
  Pagination as FlowbitePagination,
  PaginationProps as FlowbitePaginationProps,
} from 'flowbite-react';

type PaginationProps = {} & FlowbitePaginationProps;

const Pagination = forwardRef((
  {
    children,
    currentPage,
    layout = 'pagination',
    onPageChange,
    showIcons = true,
    totalPages,
    ...otherProps
  }: PaginationProps,
  ref: LegacyRef<HTMLElement>,
) => {
  return (
    <FlowbitePagination
      currentPage={currentPage}
      layout={layout}
      onPageChange={onPageChange}
      showIcons={showIcons}
      totalPages={totalPages}
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbitePagination>
  );
})

export default Pagination;

結果

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

はい、できました。