classifyx
v2.0.3
Published
<h1 align="center">ClassifyX</h1>
Downloads
41
Maintainers
Readme
Features
Dynamic Class Generation: Generate class names dynamically based on conditions, values, and configurations. This allows for flexible and powerful styling logic that adapts to different use cases.
Variant-Based Styling: Support for defining styling variants, enabling dynamic styling based on different variant properties. You can define default variants and apply them with the flexibility of using variant-specific properties.
Class Merging: Automatically merge classes with a built-in conflict resolution mechanism. This ensures that multiple class names, including those with Tailwind CSS, are merged efficiently, removing duplicate classes and resolving conflicting styles.
Conditional Classes: Apply classes conditionally based on boolean values or dynamic properties. This allows you to toggle styles without the need for complex logic.
Additional Classes Support: You can pass additional classes as arguments, making it easy to extend the base and variant classes with extra styling without any hassle.
CSS Module Integration: Seamlessly integrate with CSS Modules, allowing you to use scoped styles in modular fashion, while still benefiting from the dynamic class generation and merging features.
TypeScript Support: Fully typed, offering enhanced developer experience with improved code completion, type safety, and error checking in TypeScript environments.
Server-Side Rendering (SSR) Compatibility: Designed to work well with server-side rendering environments, ensuring that class names are generated and handled correctly during the SSR process.
Inline Boolean Expressions: Easily include class names based on inline boolean expressions, enabling simple and concise syntax for conditional styling.
Installation
Install ClassifyX
using your preferred package manager:
bun
bun add classifyx
npm
npm install classifyx
pnpm
pnpm add classifyx
yarn
yarn add classifyx
API Reference
cfx(baseStyles, variantsConfigOrClassName?, variantProps?, ...additionalClasses)
| Parameter | Type | Description |
| --------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| baseStyles
| string \| ClassValue
| Base class or classes to apply. |
| variantsConfigOrClassName
| Record<string, any> \| ClassValue
| Variant configuration object or additional class name(s). |
| variantProps
| VariantProps<any>
| Variant properties for applying conditional variant-based styles. A configuration object for managing dynamic styling based on variants. |
| additionalClasses
| ClassValue[]
| Additional class names to merge and apply conditionally. |
Usage
Basic Class Merging
import { cfx } from 'classifyx';
const Button = ({ isActive }) => (
<button className={cfx('base-btn', isActive && 'active-btn')}>
{isActive ? 'Active' : 'Inactive'}
</button>
);
Variants: Dynamic Styling Example
Define a Component with Variants
import { cfx } from 'classifyx';
const AlertBox = ({ type }) => (
<div
className={cfx(
'alert',
{
variants: {
type: {
success: 'alert-success',
error: 'alert-error',
warning: 'alert-warning',
},
},
defaultVariants: { type: 'success' },
},
{ type },
)}
>
This is a {type} alert!
</div>
);
Example
<AlertBox type="error" />
<AlertBox type="warning" />
<AlertBox /> {/* Defaults to 'success' */}
Combining Base Styles, Variants, and Additional Classes
const Card = ({ isSelected, size }) => (
<div
className={cfx(
'base-card',
{
variants: {
size: {
small: 'card-small',
large: 'card-large',
},
selected: {
true: 'card-selected',
},
},
defaultVariants: {
size: 'small',
},
},
{ size, selected: isSelected },
'extra-shadow',
)}
>
Card Content
</div>
);
Example
<Card size="large" isSelected={true} />
<Card /> {/* small and not selected by default */}
Conditional Class Merging
const NavItem = ({ isActive }) => (
<a
className={cfx('nav-item', {
active: isActive,
inactive: !isActive,
})}
>
{isActive ? 'Active' : 'Inactive'}
</a>
);
Merging Tailwind CSS Classes with Conflict Resolution
const ProfilePic = ({ isRounded }) => (
<img
className={cfx('h-12 w-12 border', isRounded && 'rounded-full')}
src="/profile.jpg"
alt="Profile"
/>
);
Complex Variant-Based Styling with Custom Properties
const Badge = ({ type, size, isOutlined }) => (
<span
className={cfx(
'badge',
{
variants: {
type: {
success: 'bg-green-500',
error: 'bg-red-500',
info: 'bg-blue-500',
},
size: {
small: 'text-sm px-2',
large: 'text-lg px-4',
},
},
defaultVariants: {
type: 'info',
size: 'small',
},
},
{ type, size },
isOutlined && 'border border-current',
)}
>
Badge
</span>
);
Usage
<Badge type="error" size="large" isOutlined />
<Badge type="success" />
<Badge size="small" />
Dynamic Class Names for Lists
const TaskList = ({ tasks }) => (
<ul>
{tasks.map((task) => (
<li
key={task.id}
className={cfx('task-item', task.completed ? 'completed' : 'pending')}
>
{task.name}
</li>
))}
</ul>
);
Inline Boolean Expressions for Conditional Styles
const Button = ({ disabled }) => (
<button
className={cfx(
'btn',
disabled && 'cursor-not-allowed opacity-50',
!disabled && 'hover:bg-blue-500',
)}
disabled={disabled}
>
Click Me
</button>
);
License
This project is licensed under the GPL-3.0-or-later License.