Polymorphic components with cva

[lennerd]

I totally get it why this library does not support polymorphic React components.

Nevertheless, for everyone who is searching for a way to use cva in React in a polymorphic way:

import { type VariantProps } from "class-variance-authority";
import React from "react";
import { twMerge } from "tailwind-merge";

type As<Props = any> = React.ElementType<Props>;

type WithAs<T extends As> = {
  as?: T;
};

export default function styled<
  TDefault extends React.ElementType,
  TClassNameFactory extends (...args: any) => string
>(component: TDefault, classNameFactory?: TClassNameFactory) {
  type StyledComponentProps<T extends React.ElementType> = WithAs<T> &
    VariantProps<TClassNameFactory>;

  const Styled = <T extends React.ElementType = TDefault>(
    {
      as,
      ...props
    }: StyledComponentProps<T> & React.ComponentPropsWithoutRef<T>,
    ref: React.ForwardedRef<any>
  ) => {
    return React.createElement(as ?? component, {
      ...props,
      className: twMerge(classNameFactory?.(props), props.className),
      ref,
    });
  };

  return React.forwardRef(Styled) as <T extends React.ElementType = TDefault>(
    props: StyledComponentProps<T> & React.ComponentPropsWithRef<T>
  ) => React.ReactElement;
}

Can be used like this:

import { cva } from "class-variance-authority";
import styled from "./util/styled";

const Button = styled(
  "button",
  cva(["button", "rounded-md bg-lime-600 px-4 py-2 font-medium text-white"])
);

export default Button;

import { Link } from "react-router-dom";

<Button as={Link} to="new">Add Note</Button>

@joe-bell thank you for your awesome work and this great library!

[ravshansbox]

Can we avoid repeating host element("button")? There is a library called windstitch that does exactly this but looks like not maintained anymore.