Typescript React forwardRef with Union/Generic Element

Viewed 50

I'm trying to implement element that can be div or button element


type customElement = HTMLDivElement | HTMLDivElement   .....

const Element = React.forwardRef<customElement, somePropInterface>((props,ref)=>{
  if(someCase){
   return <div ref={ref}
  }else if(someCase2){
   return <button ref={ref}
  }else{
   return <a ref={ref}
  }
})

or Generic case

const Element = React.forwardRef((props,ref)=>{
  return <T ref={ref}/> // element with T...
})

Problem is that it is not easy to type guard React.ref each case for typescript(div, a, button...)

I tried to use custom typeguard but not sure what to check for each element

function isDivRef(
  ref: React.Ref<HTMLDivElement>,
  element: "div" | "button"
): ref is React.Ref<HTMLDivElement> {
  return ?????
}
0 Answers
Related