{"action":"created","issue":{"url":"https://api.github.com/repos/Sunify/bem-classname/issues/1","labels_url":"https://api.github.com/repos/Sunify/bem-classname/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/Sunify/bem-classname/issues/1/comments","events_url":"https://api.github.com/repos/Sunify/bem-classname/issues/1/events","html_url":"https://github.com/Sunify/bem-classname/issues/1","id":124039442,"number":1,"title":"bemClassName doesn't play well with ReactCSSTransitionGroup","user":{"login":"sbichenko","id":3719275,"avatar_url":"https://avatars.githubusercontent.com/u/3719275?v=3","gravatar_id":"","url":"https://api.github.com/users/sbichenko","html_url":"https://github.com/sbichenko","followers_url":"https://api.github.com/users/sbichenko/followers","following_url":"https://api.github.com/users/sbichenko/following{/other_user}","gists_url":"https://api.github.com/users/sbichenko/gists{/gist_id}","starred_url":"https://api.github.com/users/sbichenko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sbichenko/subscriptions","organizations_url":"https://api.github.com/users/sbichenko/orgs","repos_url":"https://api.github.com/users/sbichenko/repos","events_url":"https://api.github.com/users/sbichenko/events{/privacy}","received_events_url":"https://api.github.com/users/sbichenko/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-12-28T09:18:01Z","updated_at":"2015-12-28T12:26:43Z","closed_at":null,"body":"# The problem\r\n\r\nI think one of the main use-cases for BEM modifiers in React are transitions. However, this won't work:\r\n\r\n```\r\nclass SignupForm extends Component {\r\n\r\n// ...\r\n\r\n// this.className is the bound bemClassName function\r\n<ReactCSSTransitionGroup transitionName={this.className('name', { transitioning: true })} ...>\r\n    <div className={this.className('name')}>\r\n        <label>Name</label>\r\n        <input type=\"text\" placeholder=\"Last Name\" {...name}/>\r\n    </div>\r\n</ReactCSSTransitionGroup>\r\n\r\n// ...\r\n}\r\n```\r\n\r\nI get `Uncaught Error: Invariant Violation: CSSCore.addClass takes only a single class name. \"SignupForm__name SignupForm__name--transitioning-enter\" contains multiple classes.`\r\n\r\nI'd like to be able to pass only the modifier's class name to the function.\r\n\r\n# Proposed backwards-compatible solutions\r\n\r\n## Make order of the returned classes a part of the API\r\n\r\nAt the moment, the order of class names is not documented in the readme. If it were documented that the modifier class name is the last one in the returned string, I could parse the result myself. \r\n\r\nThen, instead of \r\n\r\n```\r\n<ReactCSSTransitionGroup transitionName={this.className('name', { transitioning: true })} ...>\r\n```\r\n\r\nI'd do \r\n\r\n```\r\nconst className = this.className('name',  { transitioning: true });\r\nconst modifierClassName = className.substr(className.lastIndexOf(' ') + 1);\r\n<ReactCSSTransitionGroup transitionName={modifierClassName} ...>\r\n```\r\n\r\nI'd probably extract a function to reuse this logic. Which brings me to another solution.\r\n\r\n## Helper function\r\n\r\nAdd a `bemModifierClassName` helper function to the module's exports. It accepts two or three string arguments: `bemModifierClassName(block, modifier)` and `bemModifierClassName(block, element modifier)`. It returns a single class name with modifier.\r\n\r\nThis way, in my example, instead of \r\n\r\n```\r\n<ReactCSSTransitionGroup transitionName={this.className('name', { transitioning: true })} ...>\r\n```\r\n\r\nI'd do \r\n\r\n```\r\n<ReactCSSTransitionGroup transitionName={bemModifierClassName(this.constructor.name, 'name', 'transitioning'} ...>\r\n```"},"comment":{"url":"https://api.github.com/repos/Sunify/bem-classname/issues/comments/167560211","html_url":"https://github.com/Sunify/bem-classname/issues/1#issuecomment-167560211","issue_url":"https://api.github.com/repos/Sunify/bem-classname/issues/1","id":167560211,"user":{"login":"Sunify","id":1477583,"avatar_url":"https://avatars.githubusercontent.com/u/1477583?v=3","gravatar_id":"","url":"https://api.github.com/users/Sunify","html_url":"https://github.com/Sunify","followers_url":"https://api.github.com/users/Sunify/followers","following_url":"https://api.github.com/users/Sunify/following{/other_user}","gists_url":"https://api.github.com/users/Sunify/gists{/gist_id}","starred_url":"https://api.github.com/users/Sunify/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Sunify/subscriptions","organizations_url":"https://api.github.com/users/Sunify/orgs","repos_url":"https://api.github.com/users/Sunify/repos","events_url":"https://api.github.com/users/Sunify/events{/privacy}","received_events_url":"https://api.github.com/users/Sunify/received_events","type":"User","site_admin":false},"created_at":"2015-12-28T12:26:43Z","updated_at":"2015-12-28T12:26:43Z","body":"Thanks for response!\r\n\r\nIf you want only one modifier, I think you can do something like this (instead of adding helper function to module):\r\n````jsx\r\n<ReactCSSTransitionGroup transitionName={this.className('name--transitioning')} ...>\r\n````\r\n\r\nWhat do you think about this workaround?"}}