-
Notifications
You must be signed in to change notification settings - Fork 46.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature request: Allow className to take an array #3138
Comments
Actually you can just do
If |
You can also write |
Thanks @spicyj for that context! I figured this had already been investigated. |
Just a chance to revisiting this issue. This feature would be extremely useful instead of having to manipulate the classes beforehand. Also, I noticed a strange behaviour
Such feature is not being considered for future releases? /cc @spicyj |
Completely agree with @pgom. If array stringify, dividing items by comma, then why we can't just a bit rectify this behavior and use space as delimiter? |
I was a bit inaccurate. After walking through the code of React I've learned that As a solution I can only propose: |
If what you want to achieve is something like this: const myDivClassNames = ['a', 'b'];
...
<div className={myDivClassNames} /> // <div class="a b" /> ... then you could possibly use the classnames utility as follows: import classNames from 'classnames';
...
const myDivClassNames = classnames('a', 'b');
...
<div className={myDivClassNames} /> // <div class="a b" /> ... or maybe: import classNames from 'classnames';
...
const isCTrue = false;
const myDivClassNames = classnames(
{ 'a': true },
{ 'b': true },
{ 'c': isTrue },
);
...
<div className={myDivClassNames} /> // <div class="a b" /> |
className={["a", "b"]}
className={classnames(["a", "b"])}
className={["a", "b"].join(" ")} Why can't we have the first way? |
To avoid breaking anything, it could be |
I just stumbled in to this issue, so wrote a simple helper function: const classNames = (arr) => arr.filter(Boolean).join(' '); then you can do you pass anything to the array that generates a string, and not have to worry about <a className={classNames([linkStyle, props.selectedIndex === index && 'is-selected'])}> |
I'm using destructuring for that: |
I use template string. Works fine for me. |
I know there are a couple of ways to do this but I think it would result in much cleaner syntax for className to accept an array. |
Can anyone explain the difficulty in implementing this? Vue seems to have managed it with no challenge. |
I'm doing... toClassNames.ts button.tsx
would be mighty nice for className just to take an array tho :) |
does the className read the arr of classes one by one ? so there a dynamic loop that iterates over the arr of classes and executes all the classes inside it ? if so , it means loop keeps working and allocates space in the memory and that would slow the performance or I'm just blah blah ... and don't know what I'm talking about :) ? |
toClassNames.js gist looks like the best we've got for now... |
- className was being passed an array - this is actually not accepted in React, and has been an open issue for awhile: facebook/react#3138 - I am now just joining the class list array as a space-separated string, which will always work
* Add flexGrow shortcut: flG * Update reStyle to use restructureTheme * Address edges with useCompiledStyles + refactor * Refactor, fix bugs * Fix hook bug * Add more rules * Fixing some inaccurate jsdocs * Fixing eslinter issue * Fix misplaced comments * Fix issue with size keys remaining in object * Update unit tests to be more useful * Refactor useCompiledStyles to be simpler * Rename function * Extract useCompiledStyles to dedicated file * Add compat w/ nested styles to compileStyles * Update reThemeProvider to use useCompiledStyles * Make meta props configurable; Add docs * Add tests and fix bugs * Fix estlinting * Move compile phase to StyleInjector for broad use * Remove log * Remove unused import * Remove unused code * Remove commented code * Remove obsolete mock * Improve border aliases to be more intuitive * Add capability for default props to reStyle * Add unit tests; Update docs * Fix StyleInjector bug preventing css classes from rendering - className was being passed an array - this is actually not accepted in React, and has been an open issue for awhile: facebook/react#3138 - I am now just joining the class list array as a space-separated string, which will always work * Remove unused imports * Update docs * Update useStyleTag & apply PR feedback - useStyleTag: now returns string of classes space-separated
This has been implemented in ReactNative ages ago, I don't understand why it's not the case in React |
@sophiebits to improve dev experience, I think you should implement https://npmjs.com/package/classnames natively in react, it's commonly used and having to import it everytime seems not something good subjectively |
Is it really that big of a deal with performance? I never thought a check like |
+1 Coming from React Native, this is sorely missed. |
Would personally love this, so many hand rolled or external dependency based concatenators just so we can glue classnames together! |
Why this feature have been closed? This is a game changer |
I often use components that both have an internal
className
as well as an optionalclassName
passed in as a prop. The way I've been implementing this is either through (A) a local array that I construct and serialize into theclassName
prop, or (B) through usingReact.addons.classSet
.A:
B:
A is slightly less verbose, but harder to use if you have modifier classes as well (e.g.
my-component--is-selected
).I'm suggesting allowing the className to be a string or an array. And if it is an array, React internals would compact and serialize the className array into a className string.
If this is a good idea, I could make an attempt at a PR.
The text was updated successfully, but these errors were encountered: