I have a component that requires a component instance as a prop to work. I need TS to throw an error if that prop is not an instance of a specific component.
How can I achieve that? Is there a utility type for this?
interface MyComponentProps {
button: InstanceOfReactElement<RequiredButton>
}
function MyComponent({ button, ...props }: MyComponentProps) {
...
}
function RequiredButton(props) { ... }
// ❌ need typescript to throw error here if `button` is not `<RequiredButton />`
<MyComponent button={<p>whatever</p>} />
// ✅ no error here since `button` is instance of 'RequiredButton'
<MyComponent button={<RequiredButton />} />