0.0.0-0 • Published 2 years ago
@pomle/classnames v0.0.0-0
React ClassNames
Helper function to create strings for class
attribute in HTML.
Usage
classNames
is a function that take any number of arguments and created a space separated string.
Arguments can be given in any order, and have the following behavior.
string
: appended as a normal string.Record<string, boolean>
: string keys will be appended if their value is true.string[]
: all strings will be appended.
Import
import { classNames } from "@pomle/class-names";
Patterns and Examples
return items.map((item, index) => {
return (
<div
className={classNames(
"item",
index === selectedIndex ? "active" : "inactive",
)}
>
{item}
</div>
);
});
return items.map((item, index) => {
return (
<div
className={classNames("item", {
current: selectedIndex === Index,
prev: index > selectedIndex,
next: index < selectedIndex,
})}
/>
);
});
<div
className={classNames("result", match ? "exact" : "estimate", {
error: !!error,
success: !!result,
})}
/>
0.0.0-0
2 years ago