Newborn Programming Monsters

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

    2.2.1 • Public • Published

    react-switch-selector · downloads version

    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

    Install

    npm i react-switch-selector

    DownloadsWeekly Downloads

    2,909

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    81 kB

    Total Files

    18

    Last publish

    Collaborators

    • gr34se