Currently we're doing string manipulation outside React (Starring classnames) and it works perfectly, but after a while writing code, it feels a little verbose:
<div className={classnames({ ... })}> ... </div>The prop className is a plain string because it's directly mapped to DOM Element property.
Let's not create a polymorphic Frankenstein here. Keep it as close to pure JS/DOM as possible. My suggestion is not about changing, but adding.
Since a long time ago (not for Microsoft), DOM Element has the classList method. It works greatly for direct manipulation, but it wouldn't fit JSX declarative syntax.
How about extending the components with a classMap prop, that would work pretty much like classnames, mapping class names keys to conditional values.
Upon rendering that component, React would merge classNames and classMap into a single string to be passed down the render as the good old plain string classNames.
Angular has something like this for a long time:
class prop is a plain string;ngClass directive makes the magic.
Currently we're doing string manipulation outside React (Starring classnames) and it works perfectly, but after a while writing code, it feels a little verbose:
The prop
classNameis a plain string because it's directly mapped to DOM Element property.Let's not create a polymorphic Frankenstein here. Keep it as close to pure JS/DOM as possible. My suggestion is not about changing, but adding.
Since a long time ago (not for Microsoft), DOM Element has the
classListmethod. It works greatly for direct manipulation, but it wouldn't fit JSX declarative syntax.How about extending the components with a
classMapprop, that would work pretty much like classnames, mapping class names keys to conditional values.Upon rendering that component, React would merge
classNamesandclassMapinto a single string to be passed down the render as the good old plain stringclassNames.Angular has something like this for a long time:
classprop is a plain string;ngClassdirective makes the magic.