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

``sh npm i react-cva`

`Examples`


    with tailwind css

`tsx 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 (


  );
};


    with css modules

`tsx 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 (


  );
};

`API Reference`

`$3`

Builds a styled component

`ts 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

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

``sh npm i react-cva`

`Examples`


    with tailwind css

`tsx import { styled } from "react-cva";

const Render = () => { return (


  );
};


    with css modules

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

const Render = () => { return (


  );
};

`API Reference`

`$3`

Builds a styled component

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

#### Parameters

#### Returns

A JSX Element