bootstrap-switch-button-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    MIT License Dependency Status Known Vulnerabilities Package Quality npm downloads

    Bootstrap Switch Button for React

    Checkbox replacement using stylish bootstrap-4 switch button.

    Lightweight (15kb), self-contained, compiled as a single CommonJS file for easy webpack integration.


    Library Distributions

    Project Description
    bootstrap4-toggle Supports bootstrap4 (requires jQuery)
    bootstrap-switch-button Supports bootstrap4+ (ES6 class, no dependencies)
    bootstrap-switch-button-react Supports bootstrap4+ (React component, no dependencies)

    Demos

    Demos and API Docs: https://gitbrent.github.io/bootstrap-switch-button-react/

    <BootstrapSwitchButton onlabel='Admin User' offlabel='Regular User' checked={false}/>

    Demo GIF

    Installation

    NPM

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

    Yarn

    yard 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'
        onstyle='danger'
        offlabel='Regular User'
        offstyle='success'
        style='w-100 mx-3'
        onChange={(checked: boolean) => {
            this.setState({ isUserAdmin: checked })
        }}
    />

    Properties

    Name Type Default Description
    onlabel string/html "On" Text of the on switch-button
    offlabel string/html "Off" Text of the off switch-button
    size string Size of the switch-button. Possible values are: xs, sm, lg (no size specified means default bootstrap size).
    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
    style string Appends the value to the class attribute of the switch-button. This can be used to apply custom styles. Refer to Custom Styles for reference.
    width integer Sets the width of the switch-button. if set to null, width will be auto-calculated.
    height integer Sets the height of the switch-button. if set to null, height will be auto-calculated.

    Events

    Keep state in sync using the onChange function property

    <BootstrapSwitchButton
        onChange={(checked: boolean) => {
            this.setState({ isUserAdmin: checked })
        }}
    />

    Install

    npm i bootstrap-switch-button-react

    DownloadsWeekly Downloads

    6,156

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    92.7 MB

    Total Files

    9412

    Last publish

    Collaborators

    • brentely