react-classmate
Get Started
npm

Get started

Utils

Welcome to

React Classmate

A tool for managing React component class names, variants and styles with the simplicity of styled-components and cva.

Get Started
npm
Check on NPM

Overview

What's inside?

Compose simple components

Create elements on the fly. No need to write repetitive classnames or style logic.

Create a classmate component
const MyButton = rc.button`
  text-blue
  bg-white
  rounded-lg
  ${(p) => (p.$isLoading" ? "opacity-50 pointer-events-none" : "")}
`
<MyButton $isLoading={true} type="button" />

// renders to:
<button class="text-blue bg-white rounded-lg opacity-50 pointer-events-none" type="button">Click here</button>
const Alert = rc.div.variants({
  base: "p-4 rounded-md",
  variants: {
    $severity: {
      info: (p) => `bg-blue-100 text-blue-800 ${p.$isActive ? "shadow-lg" : ""}`,
      warning: "bg-yellow-100 text-yellow-800",
      error: "bg-red-100 text-red-800",
    },
  },
  defaultVariants: {
    $severity: "info",
  },
})
<Alert $severity="warning">This is an warning alert</Alert>

// renders:
// <div class="p-4 rounded-md bg-yellow-100 text-yellow-800">This is an warning alert</div>

Variants

Create styled components with different variants based on the props you pass to it.

Use variants

Adapt components with rc.extend

Extend components with additional classes or styles with the common syntax. Properties from the base component stay accessible.

Extend Components
const SectionBase = rc.div`
  px-3
  text-dark
  mx-auto
`

const CustomSection = rc.extend(SectionBase)`
  mb-3
  ${(p) => (p.$small ? "text-sm" : "")}
`
const SectionBase = rc.div`
  px-3
  text-dark
  mx-auto
`

const CustomSection = rc.extend(SectionBase)`
  mb-3
  ${(p) => (p.$small ? "text-sm" : "")}
`

<CustomSection $small>Custom Section</CustomSection>

// renders to:
<div class="px-3 text-dark mx-auto mb-3 text-sm">Custom Section</div>

Typescript Users: The examples above are simplified for demonstration purposes. For a more detailed explanation how to keep your types, please refer to the documentation.