React Compound Component Typings

React Compound Component Typings

Define Composition Typings and Export Compound Components in React using TypeScript

Imagine you were building a compound component in React.


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}) => (

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};