Component utility for polymorphic components

[carlbarrdahl]

I've written a utility function to easily create components. It allows you to create components like this:

export const Button = createComponent(
  "button",
  tv({
    base: "...",
    variants: {
      variant: { primary: "..." },
      size: { sm: "...", md: "..." },
    },
  }),
);

// Usage
<Button variant="primary">Hello</Button>

// You can also provide an existing component instead of the tag name
export const Link = createComponent(NextLink, tv( { base: "..." } ));

// Yyou can also pass the component with the prop "as"
<Button as={NextLink} href="/link">Hello</Button>

// components/ui/index.tsx
import type { ComponentPropsWithRef, ReactNode, ElementType } from "react";
import { forwardRef } from "react";

export type PolymorphicRef<C extends ElementType> =
  React.ComponentPropsWithRef<C>["ref"];

export function createComponent<T extends ElementType, TV>(
  tag: T,
  variant: TV
) {
  return forwardRef(function UIComponent<C extends ElementType>(
    props: ComponentPropsWithRef<C & T>,
    ref?: PolymorphicRef<C>
  ) {
    const { as: Component = tag, className, ...rest } = props;
    return (
      <Component
        ref={ref}
        className={variant({ class: className, ...props })}
        {...rest}
      />
    );
  });
}