NOTE:
This module now exists independently at JedWatson/classnames and is React-agnostic. The add-on here will thus be removed in the future.
classSet() is a neat utility for easily manipulating the DOM class string.
Here's a common scenario and its solution without classSet():
React // inside some `<Message />` React componentrender:function(){varclassString='message';if(this.props.isImportant){classString+=' message-important';}if(this.props.isRead){classString+=' message-read';}// 'message message-important message-read'return<divclassName={classString}>Great,I'llbethere.</div>;}This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. classSet() solves this problem:
render:function(){varcx=React.addons.classSet;varclasses=cx({'message':true,'message-important':this.props.isImportant,'message-read':this.props.isRead});// same final string, but much cleanerreturn<divclassName={classes}>Great,I'llbethere.</div>;}When using classSet(), pass an object with keys of the CSS class names you might or might not need. Truthy values will result in the key being a part of the resulting string.
classSet() also lets pass class names in as arguments that are then concatenated for you:
render:function(){varcx=React.addons.classSet;varimportantModifier='message-important';varreadModifier='message-read';varclasses=cx('message',importantModifier,readModifier);// Final string is 'message message-important message-read'return<divclassName={classes}>Great,I'llbethere.</div>;}No more hacky string concatenations!
