react-switch-selector ·

Storybook

https://gr34se.github.io/react-switch-selector/

Examples

Default

Custom colors

Outer border-radius

Installation

npm install react-switch-selector --save

or

yarn add react-switch-selector

Usage

SwitchSelector will stretch to fill its parent size (both width and height), so it's required create dedicated div container.

import SwitchSelector from "react-switch-selector";

const options = [
   {
       label: <span>Foo</span>,
       value: {
            foo: true
       },
       selectedBackgroundColor: "#0097e6",
   },
   {
       label: "Bar",
       value: "bar",
       selectedBackgroundColor: "#fbc531"
   }
];

const onChange = (newValue) => {
    console.log(newValue);
};

const initialSelectedIndex = options.findIndex(({value}) => value === "bar");

return (
    <div className="your-required-wrapper" style={{width: 100, height: 30}}>
        <SwitchSelector
            onChange={onChange}
            options={options}
            initialSelectedIndex={initialSelectedIndex}
            backgroundColor={"#353b48"}
            fontColor={"#f5f6fa"}
        />
    </div>
);

Props

| Prop name | Type | Default | Required | Note | |--------------------------|------------------------------------------|-------------------------| --------- |----------------------------------------------------------------------------------| | options | Array of OptionType | [] | true | Options array to render. Each item has a label, value and optional styling props | | onChange | Function | (v) => (console.log(v)) | true | onChange callback that returns selected Option's value | | name | string | undefined | false | HTML input name. Needed if you want to have multiple instances of the component | | initialSelectedIndex | number | 0 | false | Initially selected index of options array | | forcedSelectedIndex | number | undefined | false | Force selectedIndex with this prop (can be also used to resetting the toggle) | | border | string/number | 0 | false | Border of wrapping div | | backgroundColor | string | #ecf0f1 | false | Background color of wrapping div | | selectedBackgroundColor | string | #2ecc71 | false | Background of selected Option | | wrapperBorderRadius | number/CSS.Property.BorderRadius | 20 | false | Border radius of wrapping div | | optionBorderRadius | number/CSS.Property.BorderRadius | 18 | false | Border radius of Option component | | fontSize | number | 14 | false | Font size of Option's label | | fontColor | string | #000 | false | Font color of Option's label | | selectedFontColor | string | #fff | false | Font color of selected Option's label | | selectionIndicatorMargin | number | 2 | false | Inner px margin of selected option indicator | | disabled | boolean | false | false | Disabling the toggle |

OptionType

| Property name | Type | Default | Required | Note | | -------------------------- | -------------------------------------- | ------------------- | --------- | -------------------------------------------------------------------------------- | | label | string/number/ReactElement/HTMLElement | undefined | true | Option's label | | value | any | undefined | true | Option's value that is returned by onChange callback | | selectedBackgroundColor | string | undefined | false | Background of this selected Option | | fontColor | string | undefined | false | Font color of this Option's label | | selectedFontColor | string | undefined | false | Font color of this selected Option's label |

Overriding styles by pure css classes is available with react-switch-selector prefix:

• react-switch-selector-wrapper - component root div
• react-switch-selector-disabled - toggle in disabled state
• react-switch-selector-option - each option
• react-switch-selector-option-selected - option in "selected" state
• react-switch-selector-option-unselected - each option in "unselected" state
• react-switch-selector-option-label - each option item's label