Cristiana Man
Cristiana's Dev Blog

Cristiana's Dev Blog

React Compound Component Typings

React Compound Component Typings

Define Composition Typings and Export Compound Components in React using TypeScript

Cristiana Man's photo
Cristiana Man
·Mar 24, 2021·

1 min read

Imagine you were building a compound component in React.

<Tabs>
    <Tabs.Title>Admin</Tabs.Title> 
    <Tabs.Item>Overview</Tabs.Item>
    <Tabs.Item>Settings</Tabs.Item>
</Tabs>

The type of Tabs is FunctionComponent<TabsProps> so how can we export the Title and Item components?

We can define a TabsComposition interface:

interface TabsComposition {
    Title: FunctionComponent<TitleProps>;
    Item: FunctionComponent<ItemProps>;
}

Then the declaration of Tabs becomes:

const Tabs: FunctionComponent<TabsProps> & TabsComposition = ({children, ...props}) => (
  <>{children}</>
);

We can then assign the Title and Item components like you would normally work with objects in JavaScript:

Tabs.Title = Title;
Tabs.Item = Item;

Finally, you can export the Tabs component:

export {Tabs};
 
Share this