Verify that a React component has children of specific type

Viewed 63

Working on a Layout component in React. The layout component has three valid children:

const Content: React.FC<PropsWithChildren<any>> = (children: PropsWithChildren<any) => <Fragment />;
const Footer: React.FC<PropsWithChildren<any>> = (children: PropsWithChildren<any>) => <Fragment />;
const Header: React.FC<PropsWithChildren<any>> = (children: PropsWithChildren<any>) => <Fragment />;

You can use the layout as such:

    <WidgetShell>
        <WidgetShell.Header>This is a header</WidgetShell.Header>
        <WidgetShell.Content>This is some content</WidgetShell.Content>
        <WidgetShell.Footer>This is a styled footer</WidgetShell.Footer>
    </WidgetShell>

I would like to produce a compile error if any other children are passed in, or some of the required children are missing. Is this possible in typescript?

Minimal demo: https://stackblitz.com/edit/react-starter-typescript-v4dpdz?file=App.tsx

0 Answers
Related