How to specify that property is enum?

[xperiandri]

I want to wrap this component
https://cdn.jsdelivr.net/npm/[email protected]/Components/Pill/Pill.Props.d.ts
And it has 2 properties of enum type. How to specify that?

[christopherjbaker]

Once the build is complete, the code only has access to the javascript side of things. Unf, when you build enums, you only have access to their actual values.

For the way this is written now and without adding any extra layers, the r2wc type for PillSize would be "number" and the usage for a "compact" size would look like <my-pill size="0"></my-pill>.

If you can change your PillSize to have human-readable values like below, then you could use strings that make more sense.

export declare enum PillSize {
    compact = "compact",
    regular = "regular",
    large = "large"
}

Another thing I've done in cases like this is to wrap the component in a "web component compatibility layer". Essentially, Web Components and React Components work a bit differently, and sometimes you need to account for those differences. So rather than calling r2wc(Pill, ...), I'd make a WebPill that I pass to r2wc. It might look something like this:

const WebPill: React.FC<{ size: keyof PillSize }> = ({ size, ...props }) => {
  return <Pill size={PillSize[size]} {...props} />
})