classy

Create interactive React components from sets of CSS classes.

Features

• Tames long sets of CSS classes e.g. tailwindcss
• Produces typed and extensible components
• Handles prop interpolations and transient props
• Provides FP-style utilities to generate variants etc.
• Backwards compatible with clsx and classnames
• Small and fast

Getting Started

npm install @djgrant/classy

import { classy, switchCase } from "@djgrant/classy";

type ButtonProps = { size: "sm" | "md" | "lg" };

const Button = classy.button<ButtonProps>((props) => ([
  "font-semibold",
  "rounded",
  switchCase(props.size, {
    lg: ["text-base", "py-3", "px-4"],
    sm: ["text-xs", "py-1", "px-2"],
    default: ["text-sm", "py-2", "px-3"],
  }),
]);

<Button size="lg">Submit</Button>;

Examples

Input Parameters

Prop Switching

Custom Components

Extending Components

Generating className Strings

Declaring Transient Props

Tailwind Support

To get tailwind completions, install the tailwind extension, and add to .vscode/settings.json:

{
  "editor.quickSuggestions": {
    "strings": true // forces VS Code to trigger completions when editing "string" content
  },
  "tailwindCSS.experimental.classRegex": [
    ["classy\\..+\\(([^)]*)\\)", "\"([^\"]*)\""] // classy.div(...)
  ]
}

Credits

Created by Daniel Grant (@djgrant_).

Inspired by styled-components and classnames.