ReactTS extend type by dynamic Component Props?

Question

Is it possible to have a React component what can find out dynamically what props its got?

Example:

type BaseType = {
   baseProp?: ...
   as?: ...
}

type Extended = {
   extendedProp?: ...
}

<Base /> // expected props => { baseProp }
<Base as={ExtendedComponent} extendedProp={...} /> // expected props => { baseProp, extendedProp }

Titian Cernicova-Dragomir · Accepted Answer · 2019-05-21 11:32:52Z

1

Taking a cue from this answer we can, using intersections first infer the type of the props from as and then use those props to validate any extra properties:

type BaseType = {
  baseProp?: number
}

type Extended = {
  extendedProp?: string
}

declare const ExtendedComponent: React.FC<Extended>
function Base<T = {}>(p: BaseType & { as? : React.ComponentType<T>} & T): React.ReactElement{
  if(p.as) {
    const Child = p.as;
    return <div>{p.baseProp}<Child {...p as T}></Child></div>
  }else {
    return <div>{p.baseProp}</div>
  }
}


let s = <Base /> // expected props => { baseProp }
let a = <Base as={ExtendedComponent} extendedProp="a" />

answered May 21, 2019 at 11:32

Titian Cernicova-Dragomir

253k37 gold badges465 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Istvan Orban Over a year ago

Wow... been trying to achieve this for hours... :D. Thought there is a solution as this can be handled in compile time. Thanks alot!

Collectives™ on Stack Overflow

ReactTS extend type by dynamic Component Props?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related