Every one of us knows the case when you need to add more class names to style your component depending on some conditions, but you do not want to have negative boolean values in className prop.
In Kontentino, we had the same issue.
So, what are you going to do if you need to solve a problem like this?
Probably, the first option that are you going to do is find the library which will help you.
Another option is to write your own library. This is what we did and also what we do! We develop our own libraries.
We wanted to solve the issue, that if we have class names depending on the condition of state like:
state = { isModalShown: false };
...
<div className={[!this.state.isModalShown && style.item, this.state.isModalShown && style.activeItem]} />
The result of this example is ["item", false]. It is something that you do not want to have in className prop. So we needed to remove boolean values if it equals false, and put class name if the condition applies.
We coded our own package!
One of our first libraries is named react-style-classes and this library solves the problem with boolean values in an array of styles. It is a package for merge arguments of component style class names.
If you are interested in how we wrote this helper, you can join us on Github. https://github.com/kontentino/react-style-classes
More interesting articles coming soon at kontentino.engineering
Top comments (0)