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...
npm i kurasu
yarn add kurasu
pnpm i kurasu
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.
const ComponentWithClasses = kurasu(Component, classNames);
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. |
- Return a React Component with added classNames. Any classNames you pass to this returned component will be merged. Tailwind props will be cleverly overriden.
import kurasu from "kurasu";
const RoundedButton = kurasu("button", "rounded p-4");
const Usage = () => (
<RoundedButton onClick={doSomething}>Button Title</RoundedButton>
);
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>
);
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>
);
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>
);