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

Usage

Basic Example

import React from 'react';
import { cfx } from 'classifyx';

const MyComponent = ({ isActive }) => (
  <button className={cfx('button', { active: isActive })}>
    {isActive ? 'Active' : 'Inactive'}
  </button>
);

export default MyComponent;

Advanced Usage

ClassifyX handles dynamic styling scenarios with ease.

import React from 'react';
import { cfx } from 'classifyx';

const MyComponent = ({ isActive, isPrimary, isLarge }) => (
  <div>
    {/* Conditional Classes */}
    <button className={cfx('button', { active: isActive })}>
      {isActive ? 'Active Button' : 'Inactive Button'}
    </button>

    {/* Toggle Class */}
    <div className={cfx('box', isPrimary && 'primary', isLarge && 'large')}>
      {isPrimary ? 'Primary Box' : 'Default Box'}
    </div>

    {/* Combining Multiple Classes */}
    <div className={cfx('section', 'dark', 'wide')}>Styled Section</div>
  </div>
);

export default MyComponent;

Complex Scenarios

Example 1: Styling Based on External Data

Dynamically style a component based on complex conditions from an external data source.

import React from 'react';
import { cfx } from 'classifyx';

const ComplexComponent = ({ data }) => {
  const shouldHighlight = data.some((item) => item.priority === 'high');
  const shouldShowDetails = data.length > 5;

  return (
    <div
      className={cfx(
        'complex-component',
        shouldHighlight && 'highlight',
        shouldShowDetails && 'show-details',
      )}
    >
      <h2>Title</h2>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item.label}</li>
        ))}
      </ul>
    </div>
  );
};

export default ComplexComponent;

Example 2: Ultra-Complex Dashboard

Handle complex styling conditions in a dynamic analytics dashboard.

import React, { useState, useEffect } from 'react';
import { cfx } from 'classifyx';

const UltraComplexDashboard = () => {
  const [widgets, setWidgets] = useState([]);
  const [selectedWidget, setSelectedWidget] = useState(null);
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    // Simulate fetching widget data
    const fetchWidgets = async () => {
      const result = await fetch('https://api.example.com/widgets');
      const widgetData = await result.json();
      setWidgets(widgetData);
    };

    fetchWidgets();
  }, []);

  const handleToggleDarkMode = () => {
    setDarkMode((prev) => !prev);
  };

  return (
    <div className={cfx('dashboard', darkMode && 'dark-mode')}>
      <button
        className={cfx('toggle-button', darkMode && 'dark-mode-toggle')}
        onClick={handleToggleDarkMode}
      >
        Toggle Dark Mode
      </button>
      <ul>
        {widgets.map((widget) => (
          <li
            key={widget.id}
            className={cfx(
              'widget',
              widget === selectedWidget && 'selected-widget',
              widget.type === 'chart' && 'chart-widget',
              widget.type === 'map' && 'map-widget',
              widget.data.length > 100 && 'large-data-widget',
            )}
            onClick={() => setSelectedWidget(widget)}
          >
            {widget.name}
          </li>
        ))}
      </ul>
      <div className="main-content">
        {selectedWidget && (
          <div className="widget-details">
            <h2>{selectedWidget.name}</h2>
            <p>{selectedWidget.description}</p>
            {selectedWidget.type === 'chart' && (
              <div className="chart-container">Chart goes here</div>
            )}
            {selectedWidget.type === 'map' && (
              <div className="map-container">Map goes here</div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default UltraComplexDashboard;

API Reference

cfx(baseStyles, variantsConfigOrClassName?, variantProps?, ...additionalClasses)

• baseStyles: A string or array of base classes.
• variantsConfigOrClassName: An object to define variants or a class name string for additional styling.
• variantProps: A configuration object for managing dynamic styling based on variants.
• additionalClasses: Additional classes to apply conditionally.

License

This project is licensed under the GPL-3.0-or-later License.