Adding custom bsStyle property to button component

[mairh]

I am using react-bootstrap for my project and I am trying to add custom bsStyle property to the button component. If I use the default bootstrap classes according to the following link http://react-bootstrap.github.io/components.html#buttons the class name is rendered properly. However, if I change the property to bsStyle='facebook' it renders btn-undefined

So in short, react-bootstrap only accepts default bootstrap classes (default, promary, success, etc) for bsStyle property.

This is my HTML looks like

<Button id="facebook-btn" bsStyle="facebook" bsSize="large" block>
</Button>

and if I change my code to

<Button id="facebook-btn" bsStyle="primary" bsSize="large" block>
</Button>

it works fine and the class is rendered properly.

This is the console html log when I use custom bsStyle prop.

[AlexKVal]

There is no code in your post

This is my HTML looks like
and if I change my code to
it works fine and the class is rendered properly.

It seems you need to wrap your code snippets into ...
See Markdown supported

As for your question, I looks like this #306

A possible solution is not accepted yet #496

At the meantime you can check it and give some feedback if it helps to solve your problem.
Would you try it ?

[mairh]

@AlexKVal Thanks. Yeah, I missed the markdown for my code. The original question has been updated now.

I guess I need to add the custom bsStyle property by using the following snippet.

var constants = require('react-bootstrap/lib/constants');
constants.STYLES.custom = 'facebook';

or add empty bsStyle=" " and then use the custom style using className

I will try it out and let you know. Thanks for the support :)

[AlexKVal]

var constants = require('react-bootstrap/lib/constants');
constants.STYLES.custom = 'facebook';

this would be a workaround but it can help you.
The problem is that in future versions the lib/constants.js file may be removed or renamed
and your workaround will stop working.

@trevorr is working on that problem and he has created PR #496 as possible solution.
You can do like this to check if his solution will help you:

$ git clone -b issue-440 https://github.com/trevorr/react-bootstrap.git trevorr_rb
$ cd trevorr_rb
$ npm install
$ npm link
$ cd .../your_project_dir/
$ npm link react-bootstrap

As a result you will get special version of react-bootstrap installed
and by using npm link command https://docs.npmjs.com/cli/link
you will get this special version installed in your project.

After that you can use this fixed package in your code like this

import styleMaps from '../src/styleMaps';
...
styleMaps.addStyle('wacky');
<Button bsStyle='wacky'>

In case you dare to try this hacky way
can you then give some feedback if @trevorr's solution helps you.
It will help everybody.

[AlexKVal]

@trevorr's #496 solution is accepted and it's an official API now.
In the next nearest release you can use it.
I'm closing the issue.