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

準備
書き直すベースはこちらの ListGroup コンポーネントです。
JavaScript
ベースの ListGroup.js です。
import React, { ComponentProps, forwardRef } from 'react';
import {
ListGroup as FlowbiteListGroup,
} from 'flowbite-react';
import { LegacyRef } from 'react';
const ListGroup = forwardRef((
{
children,
...otherProps
},
ref,
) => {
return (
<FlowbiteListGroup
ref={ref}
{...otherProps}
>
{children}
</FlowbiteListGroup>
);
});
const ListGroupItem = forwardRef((
{
active = false,
children,
disabled = false,
href,
icon,
onClick,
...otherProps
},
ref,
) => {
return (
<FlowbiteListGroup.Item
active={active}
disabled={disabled}
href={href}
icon={icon}
onClick={onClick}
ref={ref}
{...otherProps}
>
{children}
</FlowbiteListGroup.Item>
);
});
export default Object.assign(ListGroup, {
Item: ListGroupItem,
});
JavaScript
TypeScript
ListGroup.tsx として編集します。
import React, { ComponentProps, forwardRef } from 'react';
import {
ListGroup as FlowbiteListGroup,
ListGroupProps as FlowbiteListGroupProps,
} from 'flowbite-react';
import { LegacyRef } from 'react';
type ListGroupProps = {} & FlowbiteListGroupProps;
const ListGroup = forwardRef((
{
children,
...otherProps
}: ListGroupProps,
ref: LegacyRef<HTMLDivElement>,
) => {
return (
<FlowbiteListGroup
ref={ref}
{...otherProps}
>
{children}
</FlowbiteListGroup>
);
});
type ListGroupItemProps = {} & ComponentProps<typeof FlowbiteListGroup.Item>;
const ListGroupItem = forwardRef((
{
active = false,
children,
disabled = false,
href,
icon,
onClick,
...otherProps
}: ListGroupItemProps,
ref: LegacyRef<HTMLAnchorElement>,
) => {
return (
<FlowbiteListGroup.Item
active={active}
disabled={disabled}
href={href}
icon={icon}
onClick={onClick}
ref={ref}
{...otherProps}
>
{children}
</FlowbiteListGroup.Item>
);
});
export default Object.assign(ListGroup, {
Item: ListGroupItem,
});
JavaScript
結果
変化はないので、前と同じ。

はい、できました。
関連記事

Google Search Console Insight の通知(過去28日間でクリック数が〇〇クリックに到達しました。)
このサイトでも Google Search Console を使っているのですが ...

[React+Tailwind] Flowbite で Table を表示してみる | 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Table コンポー ...

[React Bootstrap] Popovers を表示してみる | 心を無にして始める React
今回は、Popover コンポーネントを表示します。 準備 まだ compone ...

[React+Tailwind] Timeline を TypeScript に書き直してみた | 心を無にして始める React
準備 書き直すベースはこちらの Timeline コンポーネントです。 Java ...

[React+Tailwind] Flowbite で Avatar を表示してみる | 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Avatar コンポ ...

[React Bootstrap] Progress を表示してみる | 心を無にして始める React
今回は、ProgressBar コンポーネントを表示します。 準備 まだ com ...