Repository navigation
Proposal: combining classes using only className #154
Description
Actual behaviour
We need to use third party libs like clsx to complish this very common behaviour
<div className={ clsx( 'class1', condition && 'class2', condiction2 ? 'class3' : null ) } />Wanted behaviour
Use JSX to accomplish this common task directly
<div
className = "class1"
className = { condition && 'class2' }
className = { condition2 ? 'class3' : null }
/>
// OR
<div
className={ [
'class1',
condition && 'class2',
condition3 ? 'class3' : null
] }
/>This should compile everything to somthing like :
React.createElement( 'div', {className: ['class1', condition && 'class2', condition2 ? 'class3' : null ] } );
Activity
rafikalid commentedon Nov 10, 2022
I propose in general to compile duplicated attributes to arrays as follow:
and
fabiospampinato commentedon Jan 20, 2023
This is a problem that must be solved at the framework level, React is just giving you a very basic API for setting classes, that's the problem.
drwpow commentedon Jun 7, 2025
I personally am a big fan of Svelte’s approach, allowing not only classname combining but with easy conditions built in:
https://svelte.dev/playground/ca01d7704d2e411bbe9a9911de6ea8bb?version=5.33.16