npmpackage.info

Gathering detailed insights and metrics for react-switch-selector

react-switch-selector

Tiny switch/toggle component for React️ ⚛

2.3.0

MIT

TypeScript

621,314 2.5

Installations

npm install react-switch-selector

Pull Requests

Open

15

Total

164

Closed

43

Merged

106

Issues

Open

4

Total

15

Closed

11

Releases

v2.3.0

Published on 06 Aug 2024

Release 2.2.1

v2.2.1

Published on 07 Mar 2022

Release 2.2.0

v2.2.0

Published on 24 Feb 2022

v2.1.0

Published on 12 Dec 2021

v1.2.1

Published on 06 Sept 2020

View all 5 releases

Developer

GR34SE

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

Yes

Node Version

20.12.2

NPM Version

10.5.0 Statistics

11 Stars

293 Commits

4 Forks

1 Watching

19 Branches

2 Contributors

Updated on 06 Aug 2024

Languages

TypeScript (92.82%)

JavaScript (4.03%)

HTML (3.14%)

Total Downloads

Cumulative downloads

Total Downloads

621,314

Last day

15.7%

980

Compared to previous day

Last week

5,266

Compared to previous week

Last month

-5%

21,649

Compared to previous month

Last year

22.2%

257,098

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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

Code-Review

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

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

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 2024-11-25

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

react-switch-selector

Installations

Pull Requests

15

164

43

106

Issues

4

15

11

Releases

Developer

Developer Guide

ESM

Yes

20.12.2

10.5.0

Statistics

Languages

Total Downloads

621,314

Daily Downloads

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