Polymorphic button or link component

PHOTO EMBED

Tue Oct 17 2023 10:33:44 GMT+0000 (Coordinated Universal Time)

Saved by @passoul #typescript #react #polymorphic

import React fron "react";

type ButtonOrLinkProps = | (React.ButtonHTMLAttributes<HTMLButtonElement> & { as?: "Button"}) | (React.AnchorHTMLAttrributes<HTMLAnchorElement>) & { as: "a"});

const ButtonOrLink = (props: ButtonOrLinkProps) => {
  if(props.as === "a"){
    return <a {...props} />
  }
  return <button {...props} />
}

/** Use case */
<ButtonOrLink  onClick={(e) => {console.log(e)}}/>
<ButtonOrLink as="a"  onClick={(e) => {console.log(e)}}/>
  
content_copyCOPY

Here's how to create a polymorphic button or link component.