Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-switch-selector

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-switch-selector

Tiny switch/toggle component for React️ ⚛

  • 2.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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 nameTypeDefaultRequiredNote
optionsArray of OptionType[]trueOptions array to render. Each item has a label, value and optional styling props
onChangeFunction(v) => (console.log(v))trueonChange callback that returns selected Option's value
namestringundefinedfalseHTML input name. Needed if you want to have multiple instances of the component
initialSelectedIndexnumber0falseInitially selected index of options array
forcedSelectedIndexnumberundefinedfalseForce selectedIndex with this prop (can be also used to resetting the toggle)
borderstring/number0falseBorder of wrapping div
backgroundColorstring#ecf0f1falseBackground color of wrapping div
selectedBackgroundColorstring#2ecc71falseBackground of selected Option
wrapperBorderRadiusnumber/CSS.Property.BorderRadius20falseBorder radius of wrapping div
optionBorderRadiusnumber/CSS.Property.BorderRadius18falseBorder radius of Option component
fontSizenumber14falseFont size of Option's label
fontColorstring#000falseFont color of Option's label
selectedFontColorstring#ffffalseFont color of selected Option's label
selectionIndicatorMarginnumber2falseInner px margin of selected option indicator
disabledbooleanfalsefalseDisabling the toggle
OptionType
Property nameTypeDefaultRequiredNote
labelstring/number/ReactElement/HTMLElementundefinedtrueOption's label
valueanyundefinedtrueOption's value that is returned by onChange callback
selectedBackgroundColorstringundefinedfalseBackground of this selected Option
fontColorstringundefinedfalseFont color of this Option's label
selectedFontColorstringundefinedfalseFont 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

Keywords

FAQs

Package last updated on 06 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc