react-cva

Introduction

this is a helper library for cva which this uses internally, for creating react components. for more information view cva docs.

Acknowledgements

• Class Variance Authority (joe bell)

Installation

npm i react-cva

Examples

with tailwind css

import { styled } from "react-cva";

const Button = styled("button")("button", {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

const Render = () => {
  return (
    <div>
      <Button intent="primary">test</Button>
    </div>
  );
};

with css modules

import { styled } from "react-cva";
import style from "./button.module.css";

const Button = styled("button")(style.base, {
  variants: {
    intent: {
      primary: style.primary,
      secondary: style.secondary,
    },
    size: {
      small: style.small,
      medium: style.medium,
    },
  },
  compoundVariants: [
    { intent: "primary", size: "medium", class: style.primaryMedium },
  ],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

const Render = () => {
  return (
    <div>
      <Button>test</Button>
    </div>
  );
};

API Reference

styled

Builds a styled component

const Component = styled("div")("base", options);

Parameters

1. div: tag type (HtmlElement)
2. base: the base class name (string, string[] or null)
3. options (optional)
   • variants: your variants schema
   • compoundVariants: variants based on a combination of previously defined variants
   • defaultVariants: set default values for previously defined variants

Returns

A JSX Element