Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-switch
Advanced tools
The react-switch npm package is a lightweight and customizable switch component for React applications. It allows developers to easily integrate toggle switches into their user interfaces, providing a simple and intuitive way for users to switch between two states.
Basic Switch
This code demonstrates how to implement a basic switch using the react-switch package. The switch toggles between two states, and the state is managed using React's useState hook.
import React, { useState } from 'react';
import Switch from 'react-switch';
function App() {
const [checked, setChecked] = useState(false);
const handleChange = nextChecked => {
setChecked(nextChecked);
};
return (
<div>
<Switch onChange={handleChange} checked={checked} />
</div>
);
}
export default App;
Custom Styling
This code sample shows how to customize the appearance of the switch. You can change the colors of the switch when it is on or off, as well as the handle colors.
import React, { useState } from 'react';
import Switch from 'react-switch';
function App() {
const [checked, setChecked] = useState(false);
const handleChange = nextChecked => {
setChecked(nextChecked);
};
return (
<div>
<Switch
onChange={handleChange}
checked={checked}
offColor="#888"
onColor="#0f0"
offHandleColor="#fff"
onHandleColor="#000"
/>
</div>
);
}
export default App;
Disabled Switch
This example demonstrates how to disable the switch. When the switch is disabled, it cannot be toggled by the user.
import React, { useState } from 'react';
import Switch from 'react-switch';
function App() {
const [checked, setChecked] = useState(false);
const handleChange = nextChecked => {
setChecked(nextChecked);
};
return (
<div>
<Switch onChange={handleChange} checked={checked} disabled={true} />
</div>
);
}
export default App;
rc-switch is another React component for creating toggle switches. It offers similar functionality to react-switch but with a different API and styling options. It is also highly customizable and supports various themes.
react-toggle is a widely used package for creating toggle switches in React applications. It provides a simple API and allows for extensive customization. Compared to react-switch, react-toggle has a slightly different design and may be preferred for its simplicity and ease of use.
react-ios-switch is a React component that mimics the appearance of iOS-style toggle switches. It is ideal for applications that aim to provide a consistent iOS-like user experience. While it offers similar functionality to react-switch, its design is specifically tailored to match iOS aesthetics.
A draggable toggle-switch component for React.
npm install react-switch
import React, { Component } from "react";
import Switch from "react-switch";
class SwitchExample extends Component {
constructor() {
super();
this.state = { checked: false };
this.handleChange = this.handleChange.bind(this);
}
handleChange(checked) {
this.setState({ checked });
}
render() {
return (
<label>
<span>Switch with default style</span>
<Switch onChange={this.handleChange} checked={this.state.checked} />
</label>
);
}
}
The Switch component in the above example is nested inside a label tag. This makes sure that the label text is read out to people with reduced sight who use screen readers and enables users to click on the text to toggle the switch. If you would only put some text next to the switch but not inside a label
element, the screen reader will just read out "switch off" and the user will have no idea what it is for.
If you don't want to nest the switch inside a label, you can use the htmlFor
attribute on the label-element and set it to the same value as the id
of the switch. Alternatively, you can use the aria-labelledby
or aria-label
props to give the switch a label. You can see examples of this at the bottom of the demo page.
Prop | Type | Default | Description |
---|---|---|---|
checked | bool | Required | If true, the switch is set to checked. If false, it is not checked. |
onChange ([checked], [event], [id]) | func | Required | Invoked when the user clicks or drags the switch. It is passed three arguments: checked, which is a boolean that describes the presumed future state of the checked prop (1), the event object (2) and the id prop (3). |
disabled | bool | false | When disabled, the switch will no longer be interactive and its colors will be greyed out. |
offColor | string | '#888' | The switch will take on this color when it is not checked. Only accepts hex-colors. |
onColor | string | '#080' | The switch will take on this color when it is checked. Only accepts hex-colors. |
offHandleColor | string | '#fff' | The handle of the switch will take on this color when it is not checked. Only accepts hex-colors. |
onHandleColor | string | '#fff' | The handle of the switch will take on this color when it is checked. Only accepts hex-colors. |
handleDiameter | number | undefined | The diameter of the handle, measured in pixels. By default it will be 2 pixels smaller than the height of the switch. |
uncheckedIcon | element or bool | Default value | An icon that will be shown on the switch when it is not checked. Pass in false if you don't want any icon. |
checkedIcon | element or bool | Default value | An icon that will be shown on the switch when it is checked. Pass in false if you don't want any icon. |
uncheckedHandleIcon | element | undefined | An icon that will be shown on the handle of the switch when it is not checked. |
checkedHandleIcon | element | undefined | An icon that will be shown on the handle of the switch when it is checked. |
boxShadow | string | undefined | The default box-shadow of the handle. You can read up on the box-shadow syntax on MDN. |
activeBoxShadow | string | '0 0 2px 3px #3bf' | The box-shadow of the handle when it is active or focused. Do not set this to null, since it is important for accessibility. |
height | number | 28 | The height of the background of the switch, measured in pixels. |
width | number | 56 | The width of the background of the switch, measured in pixels. |
className | string | undefined | Set as the className of the outer shell of the switch. Useful for positioning the switch. |
borderRadius | number | undefined | Border radius of the switch and the handle. |
id | string | undefined | Set as an attribute to the embedded checkbox. This is useful for the associated label, which can point to the id in its htmlFor attribute. |
NOTE: All additional props will be passed to the nested input
element.
The following props have to be either 3-digit or 6-digit hex-colors: offColor, onColor, offHandleColor, and onHandleColor. This is because this library calculates intermediate color values based on the hex-color strings.
Examples of valid colors: '#abc', '#123456'
Examples of invalid colors: 'red', 'rgb(0,0,0)'
You're welcome to contribute to react-switch. Keep in mind that big changes have to be thoroughly tested on lots of different browsers and devices before they can be merged.
To set up the project:
$ npm install
$ npm run dev
The demo page will then be served on http://localhost:8000/ in watch mode, meaning you don't have refresh the page to see your changes.
Markus Englund |
Timothy McLane |
MIT
[7.0.0 - 2022-06-09]
FAQs
Draggable toggle-switch component for react
We found that react-switch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.