npmpackage.info

Gathering detailed insights and metrics for react-switch-selector

Other packages similar to react-switch-selector

react-native-switch-selector

2.3.0

Switch Selector to React Native.

react-native-switch-selector-fix

2.0.4

Switch Selector to React Native.

react-language-switch

1.0.13

Simple context-based language-differentiating display and selector components for react.

@pcgnpm/custom-switch-selector

1.0.0

Display custom switch selector

Gathering detailed insights and metrics for react-switch-selector

react-switch-selector - 2.3.0 | npmpackage.info

react-switch-selector

Tiny switch/toggle component for React️ ⚛

2.3.0

MIT

TypeScript

84.51 kB

2.5

Installations

npm install react-switch-selector

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.12.2

NPM Version

10.5.0 Pull Requests

Open

15

Total

167

Closed

46

Merged

106

Issues

Open

4

Total

15

Closed

11

Releases

v2.3.0

Updated on Aug 06, 2024

Release 2.2.1

v2.2.1

Updated on Mar 07, 2022

Release 2.2.0

v2.2.0

Updated on Feb 24, 2022

v2.1.0

Updated on Dec 12, 2021

v1.2.1

Updated on Sep 06, 2020

View All 5 releases

Languages

TypeScript

JavaScript

HTML

TypeScript (92.82%)

JavaScript (4.03%)

HTML (3.14%)

Developer

GR34SE

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

11 Stars

293 Commits

5 Forks

2 Watchers

19 Branches

2 Contributors

Updated on Aug 06, 2024

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

2.3.0

Package Id

react-switch-selector@2.3.0

Unpacked Size

84.51 kB

Size

13.06 kB

File Count

NPM Version

10.5.0

Node Version

20.12.2

Published on

Aug 06, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

react-switch-selector ·

Storybook

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

Examples

Default

ReactSwitchSelector

Custom colors

ReactSwitchSelector

Outer border-radius

ReactSwitchSelector

Installation

1npm install react-switch-selector --save

1yarn 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.

1import SwitchSelector from "react-switch-selector";

1const options = [
2   {
3       label: <span>Foo</span>,
4       value: {
5            foo: true
6       },
7       selectedBackgroundColor: "#0097e6",
8   },
9   {
10       label: "Bar",
11       value: "bar",
12       selectedBackgroundColor: "#fbc531"
13   }
14];
15
16const onChange = (newValue) => {
17    console.log(newValue);
18};
19
20const initialSelectedIndex = options.findIndex(({value}) => value === "bar");
21
22return (
23    <div className="your-required-wrapper" style={{width: 100, height: 30}}>
24        <SwitchSelector
25            onChange={onChange}
26            options={options}
27            initialSelectedIndex={initialSelectedIndex}
28            backgroundColor={"#353b48"}
29            fontColor={"#f5f6fa"}
30        />
31    </div>
32);

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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.5

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-switch-selector

Other packages similar to react-switch-selector

react-switch-selector

Installations

Developer Guide

Yes

ESM

20.12.2

10.5.0

Pull Requests

15

167

46

106

Issues

4

15

11

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-switch-selector ·

Storybook

Examples

Default

Custom colors

Outer border-radius

Installation

Usage

Props

OptionType

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

10

10

10

0

0

0

0

0

0

0

0

0

0

2.5

/10