Bootstrap Switch Button for React

Made for Bootstrap 4!

Easy webpack integration

Supports touch events

Includes a mini (-xs) size

Installation

NPM

npm i bootstrap-switch-button-react --save

Yarn

yarn add bootstrap-switch-button-react

Usage

Keep state in sync using the onChange function property


import BootstrapSwitchButton from 'bootstrap-switch-button-react'

<BootstrapSwitchButton
    checked={false}
    onlabel='Admin User'
    offlabel='Regular User'
    onChange={(checked: boolean) => {
        this.setState({ isUserAdmin: checked })
    }}
/>

API

Component Props

Name	Type	Default	Description
`onlabel`	string \| html	`"On"`	Text of the on switch button label.
`offlabel`	string \| html	`"Off"`	Text of the off switch button label.
`onstyle`	string	`"primary"`	Style of the on switch button. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`
`offstyle`	string	`"light"`	Style of the off switch button. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`
`checked`	boolean	false	Whether the switch button is "checked" (On)
`disabled`	boolean	false	Whether the switch button is disabled
`size`	string	null	Size of the switch button. If set to null, button is default/normal size. Possible values are: `lg`, `sm`, `xs`
`style`	string	null	Appends the provided value to the switch button's class attribute. Use this to apply custom styles to the switch button.
`width`	integer	null	Sets the width of the switch button. If set to null, width will be calculated.
`height`	integer	null	Sets the height of the switch button. If set to null, height will be calculated.