Skip to content

A Higher Order Component (HOC) for adding classes to React Components and Dom Elements.

Notifications You must be signed in to change notification settings

meesvandongen/kurasu

Repository files navigation

Kurasu

A Higher Order Component (HOC) for adding classes to React Components and Dom Elements. Excellent for use with css utility libraries such as tailwind.

  • 🐁 Small at around 1KB.
  • 🦍 Powerful API with the help of clsx
  • 🧠 Intelligent Tailwind Prop Merging
  • 🦖 Typescript Support
  • 🖥️ Tailwind IntelliSense Support
  • 🔥 Blazing fast, probably...

Installation

npm i kurasu
yarn add kurasu
pnpm i kurasu

Setup with Tailwind IntelliSense

Add the following to your .vscode/settings.json file in order to have the Tailwind IntelliSense extension work with kurasu (and clsx).

{
  "tailwindCSS.experimental.classRegex": [
    ["kurasu.*\\(.*?,([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"]
  ]
}

Also see Tailwind IntelliSense and Tailwind Regex List.

API

Main Function

const ComponentWithClasses = kurasu(Component, classNames);

Arguments

Argument Type Notes
Component A React Component -
Component An Element String e.g. 'div', 'button'.
classNames string -
classNames (props, clsx) => string props describes your input props; for clsx usage, see clsx.
classNames false Will not add classes to element.

Returns

  • Return a React Component with added classNames. Any classNames you pass to this returned component will be merged. Tailwind props will be cleverly overriden.

Examples

Basic usage

import kurasu from "kurasu";
const RoundedButton = kurasu("button", "rounded p-4");

const Usage = () => (
  <RoundedButton onClick={doSomething}>Button Title</RoundedButton>
);

With Component

import kurasu from "kurasu";
import { SomeButton } from "./my-react-buttons";
const SomeRoundedButton = kurasu(SomeButton, "rounded p-4");

const Usage = () => (
  <SomeRoundedButton onClick={doSomething}>Button Title</SomeRoundedButton>
);

With props

import kurasu from "kurasu";
const WarningButton = kurasu<{ warning: boolean }>(
  "button",
  (props) => props.warning && "bg-red-100"
);

const Usage = () => (
  <WarningButton onClick={doSomething} warning={false}>
    Button Title
  </WarningButton>
);

With props and clsx

import kurasu from "kurasu";
const RoundedWarningButton = kurasu<{ warning: boolean }>(
  "button",
  (props, clsx) => clsx([props.warning && "bg-red-100", "rounded p-4"])
);

const Usage = () => (
  <RoundedWarningButton onClick={doSomething} warning={false}>
    Button Title
  </RoundedWarningButton>
);

About

A Higher Order Component (HOC) for adding classes to React Components and Dom Elements.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •