Skip to content

GR34SE/react-switch-selector

Repository files navigation

Storybook

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

Examples

Default

ReactSwitchSelector

Custom colors

ReactSwitchSelector

Outer border-radius

ReactSwitchSelector

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