nasheomirro / react-polymorphed

A set of types to help easily create fast polymorphic components.
MIT License
24 stars 3 forks source link

constraints lead to error on @types/react^17 #3

Closed nasheomirro closed 1 year ago

nasheomirro commented 1 year ago

Adding constraints lead to errors when using newer versions of @types/react.

const Button: PolymorphicComponent<"button", {},  "button" | "a"> = ({
  as: As = "button",
  ...props
}) => {
  // error when props are spread
  return <As {...props} />;
};

This is also the case when using a single prop:

const Button: PolymorphicComponent<"button", {}, "button" | "a"> = ({
  as: As = "button",
  onClick,
}) => {
  // error: 'As' doesn't match
  return <As onClick={onClick} />;
};

I think this has something to do with the props being known, props become ComponentProps<"button"> | ComponentProps<"a"> instead of the usual ComponentProps<ElementType<any>>. As can either be "button" | "a" so there is a mismatch where As could be "button" but it's props could be ComponentProps<"a">

BrandanKing commented 1 year ago

Hi, I am trying to use onlyAs to create a button that can have the following types OnlyAs<'button' | 'a' | typeof Link> where Link is next/link. However, whenever I add this I get the error 'href' is declared here. It appears that it doesn't apply unknown to typeof props