var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var u=(n,s)=>()=>(s||n((s={exports:{}}).exports,s),s.exports),f=(n,s)=>{for(var l in s)i(n,l,{get:s[l],enumerable:!0})},h=(n,s,l,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let t of N(s))!k.call(n,t)&&t!==l&&i(n,t,{get:()=>s[t],enumerable:!(a=m(s,t))||a.enumerable});return n};var v=(n,s,l)=>(l=n!=null?p(g(n)):{},h(s||!n||!n.__esModule?i(l,"default",{value:n,enumerable:!0}):l,n)),y=n=>h(i({},"__esModule",{value:!0}),n);var d=u((C,o)=>{o.exports=_jsx_runtime});var T={};f(T,{default:()=>b,frontmatter:()=>w});var e=v(d()),w={title:"Polymorphic components with React and Typescript",date:"11/04/2022",published:!0,tags:["React","Typescript","UI Development"],image:"/images/thumbnails/typescript-react-polymorphic.svg",summary:"Let's explore techniques and patterns to build better and more robust react components using polymorphism and typescript."};function x(n={}){let{wrapper:s}=n.components||{};return s?(0,e.jsx)(s,Object.assign({},n,{children:(0,e.jsx)(l,{})})):l();function l(){let a=Object.assign({h1:"h1",a:"a",span:"span",p:"p",code:"code",blockquote:"blockquote",div:"div",object:"object",pre:"pre",strong:"strong",ul:"ul",li:"li",h2:"h2",img:"img",em:"em",h3:"h3"},n.components),{H:t,Playground:c}=a;return t||r("H",!0),c||r("Playground",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(a.h1,{id:"what-are-polymorphic-components",children:[(0,e.jsx)(a.a,{className:"anchor",href:"#what-are-polymorphic-components",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"What are Polymorphic components?"]}),` `,(0,e.jsxs)(a.p,{children:["If you've ever tried any React component libraries like ",(0,e.jsx)(a.a,{href:"https://mui.com",children:"Material UI"}),`, `,(0,e.jsx)(a.a,{href:"https://mantine.dev",children:"Mantine UI"})," or ",(0,e.jsx)(a.a,{href:"https://chakra-ui.com",children:"Chakra UI"}),"."]}),` `,(0,e.jsxs)(a.p,{children:["You might have used the ",(0,e.jsx)(a.code,{children:"as"}),` prop, which is available in most of the library components, the general idea behind this prop is to allow the consumers of your library to pass a custom element or another component that can be rendered instead of a hard-coded value.`]}),` `,(0,e.jsx)(a.p,{children:`There are plenty of confusing definitions out there when it comes to this topic, though the way I like to think about it is this:-`}),` `,(0,e.jsxs)(a.blockquote,{children:[` `,(0,e.jsxs)(a.p,{children:[`A polymorphic component is a design pattern that allows a component to act in more than one way depending on the UI requirements without breaking any accessibility or Type checking. So a `,(0,e.jsx)(a.code,{children:"Button"})," might work as a Navigation-link or vice versa."]}),` `]}),` `,(0,e.jsx)(a.p,{children:`A key thing to note here is that it's possible to build them without Typescript, however it is rudimentary and even incomplete without the type checking.`}),` `,(0,e.jsxs)(a.p,{children:["Let's see an example of a polymorphic ",(0,e.jsx)(a.code,{children:"Text"})," and ",(0,e.jsx)(a.code,{children:"Button"})," component."]}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/react-icon.svg",type:"image/svg+xml"}),"Section.tsx"]})}),(0,e.jsx)(a.pre,{line:"6-8,10-12,14-16",showLineNumbers:"",children:(0,e.jsxs)(a.code,{className:"language-tsx",line:"6-8,10-12,14-16",showLineNumbers:"",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"import"})," Link ",(0,e.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"react-router-dom"'}),` `]}),(0,e.jsx)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(a.span,{className:"token function",children:"Section"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),"section"]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token class-name",children:"Text"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"as"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'}),"h1",(0,e.jsx)(a.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"weight"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'}),"bold",(0,e.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" I am a h1 heading"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"9",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"10",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token class-name",children:"Text"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"as"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'}),"p",(0,e.jsx)(a.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"weight"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'}),"medium",(0,e.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"11",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" I am a paragraph"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"12",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"13",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"14",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token class-name",children:"Button"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"as"}),(0,e.jsxs)(a.span,{className:"token script language-javascript",children:[(0,e.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"Link",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"to"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'}),"https://sidwebworks.com",(0,e.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"15",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" I am a button rendered as a Link component"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"16",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"17",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(a.div,{"data-line":"18",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"19",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(a.p,{children:["At first glance, the ",(0,e.jsx)(a.code,{children:"Text"}),` component looks super simple. All it takes is a tag name and renders that element with the given content, so what gets rendered on the page is this`]}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/html-icon.svg",type:"image/svg+xml"}),"index.html"]})}),(0,e.jsx)(a.pre,{children:(0,e.jsxs)(a.code,{className:"language-html",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),"section"]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),"h1"]})," ",(0,e.jsxs)(a.span,{className:"token special-attr",children:[(0,e.jsx)(a.span,{className:"token attr-name",children:"style"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'}),(0,e.jsxs)(a.span,{className:"token value css language-css",children:[(0,e.jsx)(a.span,{className:"token property",children:"font-weight"}),(0,e.jsx)(a.span,{className:"token punctuation",children:":"})," bold",(0,e.jsx)(a.span,{className:"token punctuation",children:";"})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'})]})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsx)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:` I am a h1 heading `}),(0,e.jsxs)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsx)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,e.jsxs)(a.span,{className:"token special-attr",children:[(0,e.jsx)(a.span,{className:"token attr-name",children:"style"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'}),(0,e.jsxs)(a.span,{className:"token value css language-css",children:[(0,e.jsx)(a.span,{className:"token property",children:"font-weight"}),(0,e.jsx)(a.span,{className:"token punctuation",children:":"})," medium",(0,e.jsx)(a.span,{className:"token punctuation",children:";"})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'})]})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsx)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:` I am a paragraph `}),(0,e.jsxs)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsx)(a.div,{"data-line":"9",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"10",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),"a"]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'}),"https://sidwebworks.com",(0,e.jsx)(a.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:'"'}),"btn",(0,e.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsx)(a.div,{"data-line":"11",className:"highlight-line","data-highlighted":"false",children:` I am a button rendered as a Link component `}),(0,e.jsxs)(a.div,{"data-line":"12",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(a.div,{"data-line":"13",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsxs)(a.p,{children:["The ",(0,e.jsx)(a.code,{children:"Button"})," component is where things start to become a little tricky, and this is where we see the true power of polymorphism."]}),` `,(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:"button"})," and ",(0,e.jsx)(a.code,{children:"a"}),` both are semantically very different, eg. a button does not accept an `,(0,e.jsx)(a.code,{children:"href"})," attribute whereas an ",(0,e.jsx)(a.code,{children:"a"})," tag does."]}),` `,(0,e.jsx)(a.p,{children:(0,e.jsx)(a.strong,{children:"Now let's build one from scratch."})}),` `,(0,e.jsxs)(a.h1,{id:"project-setup",children:[(0,e.jsx)(a.a,{className:"anchor",href:"#project-setup",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"Project setup"]}),` `,(0,e.jsxs)(a.p,{children:["You can use any frontend tooling like ",(0,e.jsx)(a.a,{href:"https://create-react-app.dev/",children:"CRA"}),`, `,(0,e.jsx)(a.a,{href:"https://www.snowpack.dev/",children:"Snowpack"})," or ",(0,e.jsx)(a.a,{href:"https://vitejs.dev/",children:"Vite"})]}),` `,(0,e.jsx)(a.p,{children:"I will use Vite, to quickly create a new React + Typescript application with Vite I can do"}),` `,(0,e.jsx)(a.pre,{children:(0,e.jsxs)(a.code,{className:"language-shell",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token comment",children:"# with NPM"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token function",children:"npm"}),` create vite demo --template react-ts `]}),(0,e.jsx)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token comment",children:"# with Yarn"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token function",children:"yarn"}),` create vite/app demo --template react-ts `]})]})}),` `,(0,e.jsxs)(a.h1,{id:"creating-the-text-component",children:[(0,e.jsx)(a.a,{className:"anchor",href:"#creating-the-text-component",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"Creating the Text component"]}),` `,(0,e.jsxs)(a.p,{children:["Our ",(0,e.jsx)(a.code,{children:"Text"})," component should be able do the following"]}),` `,(0,e.jsxs)(a.ul,{children:[` `,(0,e.jsxs)(a.li,{children:["Accept an ",(0,e.jsx)(a.code,{children:"as"})," prop."]}),` `,(0,e.jsxs)(a.li,{children:["Type check props against attributes of the element passed in ",(0,e.jsx)(a.code,{children:"as"})," prop."]}),` `,(0,e.jsxs)(a.li,{children:["Accept a ",(0,e.jsx)(a.code,{children:"weight"})," prop to customise the font-weight of the element."]}),` `]}),` `,(0,e.jsxs)(a.p,{children:["Here is how our basic ",(0,e.jsx)(a.code,{children:"Text"})," component would look like"]}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/react-icon.svg",type:"image/svg+xml"}),"Text.tsx"]})}),(0,e.jsx)(a.pre,{showLineNumbers:"",id:"1",children:(0,e.jsxs)(a.code,{className:"language-tsx",showLineNumbers:"",id:"1",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"import"})," React",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," ComponentPropsWithoutRef ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"react"'}),` `]}),(0,e.jsx)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(a.span,{className:"token class-name",children:"TextProps"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsxs)(a.span,{className:"highlight-word",children:["ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token string",children:'"span"'}),(0,e.jsx)(a.span,{className:"token operator",children:">"})]}),` `]}),(0,e.jsx)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(a.span,{className:"token function-variable function",children:"Text"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," children",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," className",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token operator",children:"..."}),"rest ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," TextProps",(0,e.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),"span"]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(a.span,{className:"token script language-javascript",children:[(0,e.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"className",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsxs)(a.span,{className:"token spread",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token operator",children:"..."}),"rest",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"children",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"9",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(a.div,{"data-line":"10",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"11",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(a.p,{children:["if it's your first time using ",(0,e.jsx)(t,{id:"1",index:"1",children:"ComponentPropsWithoutRef"}),` utility type, no worries.`]}),` `,(0,e.jsxs)(a.p,{children:["All is does is to take a ",(0,e.jsx)(a.code,{children:"React.ElementType"})," eg: ",(0,e.jsx)(a.code,{children:"span"}),` and return an object type of all the available `,(0,e.jsx)(a.code,{children:"attributes"})," for that element."]}),` `,(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.strong,{children:"Cool"}),", the basic component stuff is done but! it's still not Polymorphic."]}),` `,(0,e.jsxs)(a.h2,{id:"supporting-the-as-prop",children:[(0,e.jsx)(a.a,{className:"anchor",href:"#supporting-the-as-prop",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"Supporting the ",(0,e.jsx)(a.code,{children:"as"})," prop"]}),` `,(0,e.jsxs)(a.p,{children:["We will check if the ",(0,e.jsx)(t,{id:"2",index:"2",children:"as"}),` prop is provided, if it is then render that as the `,(0,e.jsx)(t,{id:"2",index:"1",children:"Component"}),` otherwise `,(0,e.jsx)(t,{id:"2",index:"3",children:"default"})," to a regular ",(0,e.jsx)(a.code,{children:"span"})," tag."]}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/react-icon.svg",type:"image/svg+xml"}),"Text.tsx"]})}),(0,e.jsx)(a.pre,{showLineNumbers:"",id:"2",children:(0,e.jsxs)(a.code,{className:"language-tsx",showLineNumbers:"",id:"2",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"import"})," React",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ElementType ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"react"'}),` `]}),(0,e.jsx)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(a.span,{className:"token class-name",children:"TextProps"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token string",children:'"span"'}),(0,e.jsx)(a.span,{className:"token operator",children:">"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"&"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"}),(0,e.jsx)(a.span,{className:"token operator",children:"?"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," ElementType ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(a.span,{className:"token function-variable function",children:"Text"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," children",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," className",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token operator",children:"..."}),"rest ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," TextProps",(0,e.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsx)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(a.span,{className:"highlight-word",children:"Component"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"highlight-word",children:"as"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"||"})," ",(0,e.jsx)(a.span,{className:"highlight-word",children:(0,e.jsx)(a.span,{className:"token string",children:'"span"'})}),` `]}),(0,e.jsx)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"9",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(a.div,{"data-line":"10",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token class-name",children:"Component"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(a.span,{className:"token script language-javascript",children:[(0,e.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"className",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsxs)(a.span,{className:"token spread",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token operator",children:"..."}),"rest",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"11",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"children",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"12",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(a.div,{"data-line":"13",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"14",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(a.p,{children:"So now if we try it like this,"}),` `,(0,e.jsx)(a.pre,{children:(0,e.jsxs)(a.code,{className:"language-tsx",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token class-name",children:"Text"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"as"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:"'"}),"a",(0,e.jsx)(a.span,{className:"token punctuation",children:"'"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(a.span,{className:"token attr-value",children:[(0,e.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:"'"}),"http://sidwebworks",(0,e.jsx)(a.span,{className:"token punctuation",children:"'"})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" Hello world"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text"}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsx)(a.img,{src:"/images/blog/polymorphic-ts-components-ts-error.png",alt:"Typescript Error"}),` `,(0,e.jsx)(a.p,{children:"Typescript screams at us with this weird error. Let me simplify it for you."}),` `,(0,e.jsxs)(a.p,{children:["All it's trying to say is ",(0,e.jsx)(a.code,{children:"href"})," ",(0,e.jsxs)(a.strong,{children:["does not exists on ",(0,e.jsx)(a.code,{children:"TextProps"})]}),` which is quite right as we passed `,(0,e.jsx)(a.code,{children:"span"})," to the ",(0,e.jsx)(a.code,{children:"ComponentPropsWithoutRef"})," utility and spans don't have a ",(0,e.jsx)(a.code,{children:"href"}),` attribute.`]}),` `,(0,e.jsx)(a.p,{children:(0,e.jsx)(a.strong,{children:"Let's fix this."})}),` `,(0,e.jsxs)(a.h2,{id:"improving-type-support-for-as-prop",children:[(0,e.jsx)(a.a,{className:"anchor",href:"#improving-type-support-for-as-prop",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"Improving type support for ",(0,e.jsx)(a.code,{children:"as"})," prop"]}),` `,(0,e.jsxs)(a.p,{children:["The problem we now have is, when the ",(0,e.jsx)(a.code,{children:"as"}),` prop changes, the value passed to `,(0,e.jsx)(t,{id:"3",index:"1",children:"ComponentPropsWithoutRef"})," is still hard-coded."]}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/react-icon.svg",type:"image/svg+xml"}),"Text.tsx"]})}),(0,e.jsx)(a.pre,{line:"3",showLineNumbers:"",id:"3",children:(0,e.jsxs)(a.code,{className:"language-tsx",line:"3",showLineNumbers:"",id:"3",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"import"})," React",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ElementType ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"react"'}),` `]}),(0,e.jsx)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(a.span,{className:"token class-name",children:"TextProps"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"highlight-word",children:(0,e.jsx)(a.span,{className:"token string",children:'"span"'})}),(0,e.jsx)(a.span,{className:"token operator",children:">"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"&"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"}),(0,e.jsx)(a.span,{className:"token operator",children:"?"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," ElementType ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(a.span,{className:"token function-variable function",children:"Text"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," children",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," className",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token operator",children:"..."}),"rest ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," TextProps",(0,e.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsx)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," Component ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"||"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"span"'}),` `]}),(0,e.jsx)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"9",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(a.div,{"data-line":"10",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token class-name",children:"Component"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(a.span,{className:"token script language-javascript",children:[(0,e.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"className",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsxs)(a.span,{className:"token spread",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token operator",children:"..."}),"rest",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"11",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"children",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"12",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(a.div,{"data-line":"13",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"14",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(a.p,{children:["So we need some way to pass a dynamic value in there which changes as we update our ",(0,e.jsx)(a.code,{children:"as"})," prop value."]}),` `,(0,e.jsxs)(a.p,{children:[`Luckily for us Typescript offers a feature called `,(0,e.jsx)(a.code,{children:"Generics"})," which can help us here."]}),` `,(0,e.jsxs)(a.p,{children:["A ",(0,e.jsx)(a.em,{children:"Generic"}),` is essentially a type value which can be passed around to other types and functions, kind of like `,(0,e.jsx)(a.strong,{children:"variables which only Types can access"}),"."]}),` `,(0,e.jsxs)(a.p,{children:["So let's ",(0,e.jsx)(a.em,{children:"Genericify"})," our component :)"]}),` `,(0,e.jsxs)(a.p,{children:[`In order to do that, it would be better to have a utility type like a `,(0,e.jsx)(a.code,{children:"PolymorphicPropsWithoutRef"})," which takes 2 generic types ",(0,e.jsx)(a.code,{children:"C"})," (as prop) and ",(0,e.jsx)(a.code,{children:"P"}),` (custom props)`]}),` `,(0,e.jsx)(a.p,{children:"We're just making this utility so we can have some reusability in our code."}),` `,(0,e.jsxs)(a.h3,{id:"writing-a-utility-type",children:[(0,e.jsx)(a.a,{className:"anchor",href:"#writing-a-utility-type",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"Writing a utility type"]}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/react-icon.svg",type:"image/svg+xml"}),"Text.tsx"]})}),(0,e.jsx)(a.pre,{showLineNumbers:"",children:(0,e.jsxs)(a.code,{className:"language-tsx",showLineNumbers:"",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"import"})," React",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ElementType",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," PropsWithChildren ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"react"'}),` `]}),(0,e.jsx)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["AsProp",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"}),(0,e.jsx)(a.span,{className:"token operator",children:"?"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token constant",children:"C"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["PolymorphicPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token constant",children:"P"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," PropsWithChildren",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"P"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"&"})," AsProp",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"&"})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsx)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:` `})]})}),` `,(0,e.jsx)(a.p,{children:"Umm so what the hell does this type even do? Let's break it down a bit."}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/react-icon.svg",type:"image/svg+xml"}),"Text.tsx"]})}),(0,e.jsx)(a.pre,{line:"3-5",showLineNumbers:"",children:(0,e.jsxs)(a.code,{className:"language-tsx",line:"3-5",showLineNumbers:"",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"import"})," React",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ElementType",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," PropsWithChildren ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"react"'}),` `]}),(0,e.jsx)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["AsProp",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"true",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"}),(0,e.jsx)(a.span,{className:"token operator",children:"?"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token constant",children:"C"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["PolymorphicPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token constant",children:"P"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," PropsWithChildren",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"P"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"&"})," AsProp",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"&"})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsx)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:` `})]})}),` `,(0,e.jsxs)(a.p,{children:["In the above highlighted code, like the name says we create a type for the ",(0,e.jsx)(a.code,{children:"as"})," prop that takes in a generic ",(0,e.jsx)(a.code,{children:"C"})," which extends the ",(0,e.jsx)(a.code,{children:"ElementType"})]}),` `,(0,e.jsxs)(a.p,{children:["Extending other types like this is called as ",(0,e.jsx)(a.em,{children:"Generic constrains"})," meaning it will only accept a value that satifies that given constrain."]}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/react-icon.svg",type:"image/svg+xml"}),"Text.tsx"]})}),(0,e.jsx)(a.pre,{line:"7",showLineNumbers:"",children:(0,e.jsxs)(a.code,{className:"language-tsx",line:"7",showLineNumbers:"",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"import"})," React",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ElementType",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," PropsWithChildren ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"react"'}),` `]}),(0,e.jsx)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["AsProp",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"}),(0,e.jsx)(a.span,{className:"token operator",children:"?"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token constant",children:"C"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"true",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["PolymorphicPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token constant",children:"P"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," PropsWithChildren",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"P"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"&"})," AsProp",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"&"})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsx)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:` `})]})}),` `,(0,e.jsxs)(a.p,{children:["Next, we create our main utility ",(0,e.jsx)(a.code,{children:"PolymorphicPropsWithoutRef"}),", which again takes in 2 generics ",(0,e.jsx)(a.code,{children:"C"})," for the ElementType and an optional type ",(0,e.jsx)(a.code,{children:"P"})," for custom props which we default to as an empty object."]}),` `,(0,e.jsx)(a.p,{children:"In this type we make use of 3 other utility types and compose them together."}),` `,(0,e.jsx)(a.p,{children:"These utilities are :-"}),` `,(0,e.jsxs)(a.ul,{children:[` `,(0,e.jsxs)(a.li,{children:[(0,e.jsx)(a.code,{children:"PropsWithChildren"}),": comes from React, adds the ",(0,e.jsx)(a.code,{children:"children"})," prop."]}),` `,(0,e.jsxs)(a.li,{children:[(0,e.jsx)(a.code,{children:"AsProp"}),": we made this! it adds the ",(0,e.jsx)(a.code,{children:"as"})," prop."]}),` `,(0,e.jsxs)(a.li,{children:[(0,e.jsx)(a.code,{children:"ComponentPropsWithoutRef"}),": comes from React, adds the element's HTML attributes."]}),` `]}),` `,(0,e.jsx)(a.p,{children:(0,e.jsx)(a.strong,{children:"Nice! let's use it back in our Text Component."})}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/react-icon.svg",type:"image/svg+xml"}),"Text.tsx"]})}),(0,e.jsx)(a.pre,{showLineNumbers:"",children:(0,e.jsxs)(a.code,{className:"language-tsx",showLineNumbers:"",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"import"})," React",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ElementType",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," PropsWithChildren ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"react"'}),` `]}),(0,e.jsx)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["AsProp",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"}),(0,e.jsx)(a.span,{className:"token operator",children:"?"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token constant",children:"C"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["PolymorphicPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token constant",children:"P"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," PropsWithChildren",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"P"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"&"})," AsProp",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token operator",children:">"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"&"})," ComponentPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsx)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsx)(a.div,{"data-line":"9",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"10",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["TextProps",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," PolymorphicPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsx)(a.div,{"data-line":"11",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"12",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," Text ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),"As ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ",(0,e.jsx)(a.span,{className:"token class-name",children:"ElementType"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token string",children:'"span"'}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," children",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," className",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token operator",children:"..."}),"rest ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," TextProps",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),"As",(0,e.jsx)(a.span,{className:"token operator",children:">"}),(0,e.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsx)(a.div,{"data-line":"13",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"14",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," Component ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"||"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"span"'}),` `]}),(0,e.jsx)(a.div,{"data-line":"15",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"16",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(a.div,{"data-line":"17",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token class-name",children:"Component"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(a.span,{className:"token script language-javascript",children:[(0,e.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"className",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsxs)(a.span,{className:"token spread",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token operator",children:"..."}),"rest",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"18",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"children",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"19",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(a.div,{"data-line":"20",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"21",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(a.p,{children:["Works like a charm! Lets add our ",(0,e.jsx)(a.code,{children:"weight"})," prop."]}),` `,(0,e.jsxs)(a.h3,{id:"adding-a-custom-size-prop",children:[(0,e.jsx)(a.a,{className:"anchor",href:"#adding-a-custom-size-prop",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"Adding a custom ",(0,e.jsx)(a.code,{children:"size"})," prop"]}),` `,(0,e.jsxs)(a.p,{children:["So we will have some default font weights object that our component will accept, and then use the ",(0,e.jsx)(a.code,{children:"keyof"})," operator to extract a union type from that object."]}),` `,(0,e.jsx)(a.p,{children:"Then we can pass it to our polymorphic utility type"}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/react-icon.svg",type:"image/svg+xml"}),"Text.tsx"]})}),(0,e.jsx)(a.pre,{showLineNumbers:"",children:(0,e.jsxs)(a.code,{className:"language-tsx",showLineNumbers:"",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(a.span,{className:"token constant",children:"WEIGHTS"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[" xs",(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token string",children:"'100'"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[" sm",(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token string",children:"'200'"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" md",(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token string",children:"'400'"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[" lg",(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token string",children:"'600'"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(a.span,{className:"token class-name",children:"FontWeights"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"keyof"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"typeof"})," ",(0,e.jsx)(a.span,{className:"token constant",children:"WEIGHTS"}),` `]}),(0,e.jsx)(a.div,{"data-line":"9",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"10",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["TextProps",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," PolymorphicPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"11",className:"highlight-line","data-highlighted":"false",children:[" weight",(0,e.jsx)(a.span,{className:"token operator",children:":"}),` FontWeights `]}),(0,e.jsxs)(a.div,{"data-line":"12",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]})]})}),` `,(0,e.jsxs)(a.p,{children:["Next we can merge the ",(0,e.jsx)(a.code,{children:"style"})," object coming from the props and add an ",(0,e.jsx)(a.code,{children:"fontWeight"})," key, which will be the ",(0,e.jsx)(a.code,{children:"weight"})," prop's value"]}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:(0,e.jsxs)(a.div,{className:"flex items-center mb-1 h-8 gap-2",children:[(0,e.jsx)(a.object,{className:"object-fit w-8 h-5",data:"/icons/react-icon.svg",type:"image/svg+xml"}),"Text.tsx"]})}),(0,e.jsx)(a.pre,{showLineNumbers:"",children:(0,e.jsxs)(a.code,{className:"language-tsx",showLineNumbers:"",children:[(0,e.jsxs)(a.div,{"data-line":"1",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(a.span,{className:"token constant",children:"WEIGHTS"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"2",className:"highlight-line","data-highlighted":"false",children:[" xs",(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token string",children:"'100'"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"3",className:"highlight-line","data-highlighted":"false",children:[" sm",(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token string",children:"'200'"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"4",className:"highlight-line","data-highlighted":"false",children:[" md",(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token string",children:"'400'"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"5",className:"highlight-line","data-highlighted":"false",children:[" lg",(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token string",children:"'600'"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"6",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(a.div,{"data-line":"7",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"8",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(a.span,{className:"token class-name",children:"FontWeights"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"keyof"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"typeof"})," ",(0,e.jsx)(a.span,{className:"token constant",children:"WEIGHTS"}),` `]}),(0,e.jsx)(a.div,{"data-line":"9",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"10",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(a.span,{className:"token class-name",children:["TextProps",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ElementType",(0,e.jsx)(a.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," PolymorphicPropsWithoutRef",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),(0,e.jsx)(a.span,{className:"token constant",children:"C"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"11",className:"highlight-line","data-highlighted":"false",children:[" weight",(0,e.jsx)(a.span,{className:"token operator",children:":"}),` FontWeights `]}),(0,e.jsxs)(a.div,{"data-line":"12",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),` `]}),(0,e.jsx)(a.div,{"data-line":"13",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"14",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," Text ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),"As ",(0,e.jsx)(a.span,{className:"token keyword",children:"extends"})," ",(0,e.jsx)(a.span,{className:"token class-name",children:"ElementType"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token string",children:'"span"'}),(0,e.jsx)(a.span,{className:"token operator",children:">"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"15",className:"highlight-line","data-highlighted":"false",children:[" children",(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"16",className:"highlight-line","data-highlighted":"false",children:[" className",(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"17",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"}),(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"18",className:"highlight-line","data-highlighted":"false",children:[" weight ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token string",children:'"md"'}),(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"19",className:"highlight-line","data-highlighted":"false",children:[" style",(0,e.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(a.div,{"data-line":"20",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token operator",children:"..."}),`rest `]}),(0,e.jsxs)(a.div,{"data-line":"21",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token operator",children:":"})," TextProps",(0,e.jsx)(a.span,{className:"token operator",children:"<"}),"As",(0,e.jsx)(a.span,{className:"token operator",children:">"}),(0,e.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"22",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," Component ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token keyword",children:"as"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"||"})," ",(0,e.jsx)(a.span,{className:"token string",children:'"span"'}),(0,e.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(a.div,{"data-line":"23",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"24",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"const"})," _style ",(0,e.jsx)(a.span,{className:"token operator",children:"="})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(a.span,{className:"token operator",children:"..."}),"style",(0,e.jsx)(a.span,{className:"token punctuation",children:","})," fontWeight",(0,e.jsx)(a.span,{className:"token operator",children:":"})," ",(0,e.jsx)(a.span,{className:"token constant",children:"WEIGHTS"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"["}),"weight",(0,e.jsx)(a.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(a.div,{"data-line":"25",className:"highlight-line","data-highlighted":"false",children:` `}),(0,e.jsxs)(a.div,{"data-line":"26",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(a.div,{"data-line":"27",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token class-name",children:"Component"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(a.span,{className:"token script language-javascript",children:[(0,e.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"className",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(a.span,{className:"token attr-name",children:"style"}),(0,e.jsxs)(a.span,{className:"token script language-javascript",children:[(0,e.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"_style",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsxs)(a.span,{className:"token spread",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token operator",children:"..."}),"rest",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"28",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),"children",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token plain-text"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"29",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsxs)(a.span,{className:"token tag",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(a.div,{"data-line":"30",className:"highlight-line","data-highlighted":"false",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:")"}),(0,e.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(a.div,{"data-line":"31",className:"highlight-line","data-highlighted":"false",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(a.div,{"data-line":"32",className:"highlight-line","data-highlighted":"false",children:` `})]})}),` `,(0,e.jsxs)(a.h1,{id:"thats-it",children:[(0,e.jsx)(a.a,{className:"anchor",href:"#thats-it",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"That's it,"]}),` `,(0,e.jsxs)(a.p,{children:["Now you can use these same techniques to create other polymorphic components like ",(0,e.jsx)(a.code,{children:"Button"}),", ",(0,e.jsx)(a.code,{children:"Icon"})," etc."]}),` `,(0,e.jsxs)(a.h1,{id:"live-demo",children:[(0,e.jsx)(a.a,{className:"anchor",href:"#live-demo",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"Live Demo"]}),` `,(0,e.jsx)(c,{id:"vitejs-vite-egvdfy",openFile:"src/App.tsx"})]})}}var b=x;function r(n,s){throw new Error("Expected "+(s?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(T);})(); ;return Component;

Sidharth Rathi

18yo Software developer ☕

I write about my findings in software design, security and other web stuff.

✏️From the Blog

I write about my findings in software
design, security and other web stuff.