CODEWITHSUNDEEP
reactjsflowtype
MoeSattler
MoeSattler

Reputation: 6894

How to flow type a Component?

type Props = {
  Component: ???
}
const AnotherComp = ({Component}: Props) => (
  <Component />
)

What's the proper way to add a prop for the component?

Upvotes: 2

Views: 3791

Answers (4)

fabianvelizok
fabianvelizok

Reputation: 11

I think this is what you are looking for: 

// Component we want to pass as a prop
class MyComponent extends React.Component<{}> {}

type Props = {
  Component: React.Element<typeof MyComponent>
}

const AnotherComp = ({ Component }: Props) => (
  <Component />
)

Link to documentation: https://flow.org/en/docs/react/types/#toc-react-element

Upvotes: 0

Pavan Gangireddy
Pavan Gangireddy

Reputation: 427

type Props = {
 Component: React.Component<*>
};

Reference from react type definitions:

class React.Component<P = {}, S = {}>
interface React.Component<P = {}, S = {}>

Upvotes: 0

gcanti
gcanti

Reputation: 1462

type FunctionComponent<P> = (props: P) => ?React$Element<any>;
type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;
type Component<D, P, S> = ClassComponent<D, P, S> | FunctionComponent<P>;

type Props = {
  Component: Component<void, {}, void>
};

Upvotes: 3

Gabe Levi
Gabe Levi

Reputation: 1937

The type that you're looking for is called ReactClass. The type for any component would be ReactClass<any>.

Check out this similar question: What type to use for things React can render?

Upvotes: 1

Related Questions