Discussion: Applying the helper + classnames

[marcohamersma]

Currently, the classes are applied to elements by using the spread operator, like this: <div {...bemHelper()}></div>

My rationale for using the spread operator over something like <div className={bemHelper()}></div> was very simple; for me it prevents the occasional case where I type “class” or “classNames” instead of “className”, and wanted to save myself those troubles. That said, I'm not convinced it's the best way of doing this.

I am thinking about what other/better ways to apply the classes to elements. If you have any feedback, it's very welcome.

[marcohamersma]

I was thinking of at some point having the helper generate a react component (using React.createFactory) instead of purely an object:

var BemHelper = require('react-bem-helper');
var BEMDiv    = new BemHelper('component', 'div');

return <BEMDiv element="header" modifiers='active' extraClasses="lol"/>;

Although I've done some basic research on this, I'm not convinced about it's feasibility, wanted to put it out there, though.

[Merri]

I give you +1 for figuring out a unique solution! Last weekend I went through quite a many React BEM utilities, but didn't notice yours at that time - there are so many. Issue with most of them is that they are quite verbose (and also not very clever), and compared to what I've seen your solution is probably the least verbose so that is a great plus.

If interested I figured up a very non-verbose solution last Sunday. It goes by the name Bemact and instead relies entirely to className properties by post-processing them to full BEM syntax. So by that className usage it kind of is opposite to what you want, but I think you probably find the solution very interesting.

[monolithed]

+1, another idea https://www.npmjs.com/package/react-bem-classes