CSS class names for buttons

[emilian]

Are there plans to send the CSS class names for the buttons along with the name and listener?
It would come in handy for styling especially with Bootstrap.

[xeodou]

hi @emilian the name of the button will transfer to the button's classname, I think the name is what you want.

 this.state.buttons.map(function (button, i) {
            return React.createElement('button', {
              id: button.name.toLowerCase(),
              key: i,
              className: button.name.toLowerCase(),
              onClick: this.handleClick
            }, button.name)
          }, this)

Here is the demo

<div class="info" data-reactid=".0.1.0">
   <span data-reactid=".0.1.0.0:$0">Simple example with one button and listener</span>
   <div class="buttons" data-reactid=".0.1.0.1">
       <button id="close" class="close" data-reactid=".0.1.0.1.$0">close</button>
   </div>
</div>

[emilian]

Thanks for the reply.

Actually I want to keep the class name and the button name separate. It would be good to have another property for the CSS classes along with name and listener. Something like this:

buttons: [{
    name: 'close',
    listener: function() {

    },
   cssClasses: 'btn btn-default'
}],

[xeodou]

@emilian I get it. I will add additional property className.And change it like

 this.state.buttons.map(function (button, i) {
            return React.createElement('button', {
              id: button.name.toLowerCase(),
              key: i,
              className: button.className ? button.className :  button.name.toLowerCase(),
              onClick: this.handleClick
            }, button.name)
          }, this)

Is it fine for you ?

[emilian]

Yes, that would be perfect. Thanks xeodou.

[xeodou]

@emilian I am already push the new code. You can upgrade the package through npm.

[emilian]

I upgraded yesterday and it is working just fine. Thanks for the quick turnaround!

[xeodou]

It;s fine.