Library. Clsx

🧱 Суть

clsx – небольшая утилита для удобного формирования className по условиям.

📦 Проблема

1. Сложные шаблонные строки

className={`btn ${isActive ? 'active' : ''} ${disabled ? 'disabled' : ''}`}

Чем больше условий, тем хуже читается код.

✅ Решение

Использовать clsx для условного объединения CSS-классов.

💻 Код

Установка:

npm install clsx

Объект условий:

import clsx from 'clsx';
 
className={clsx('btn', {
	active: isActive,
	disabled: disabled,
})}

Несколько условий:

className={clsx(
	'btn',
	isPrimary && 'btn-primary',
	size === 'lg' && 'btn-lg'
)}

🎯 Вывод

• clsx делает условные классы более читаемыми
• избавляет от сложных шаблонных строк
• особенно полезен при большом количестве условий

🔗 Связано

• Library. Tailwind
• Library. Tailwind-merge
• React. Spread
• TSX. Сортировка JSX-атрибутов