Skip to content

Instantly share code, notes, and snippets.

@Venipa
Created January 31, 2023 01:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Venipa/fd9358a91cf0b1c208ddaaf63b69747f to your computer and use it in GitHub Desktop.
Save Venipa/fd9358a91cf0b1c208ddaaf63b69747f to your computer and use it in GitHub Desktop.
small factory for one liner components
import { cva, VariantProps } from "class-variance-authority";
import { ReactElement } from "react";
type CreateCVAProps<T> = Parameters<typeof cva<T>>;
export function createCVA<P = {}, T = any>(base?: CreateCVAProps<T>[0], config?: CreateCVAProps<T>[1]) {
const baseClassName = cva(base, config);
type cxProps = VariantProps<typeof baseClassName>;
type ComponentProps = P & cxProps;
return function (this: any, element: <P2 = {}>(prop: ComponentProps & P2 & { className: string }) => ReactElement<P, any>) {
return function (props: ComponentProps) {
return element({ ...props, className: baseClassName(props as any) });
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment