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

react-switch

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-switch - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

.prettierignore

93

CHANGELOG.md
# Changelog
All notable changes to this project will be documented in this file.

@@ -7,71 +8,109 @@

## [2.2.0 - 2017-12-19]
### Added
* onChange callback function is now given the id prop that the user has given as the third argument.
### Fixed
* Improved responsiveness on mobile by removing the 300 ms delay when clicking the background.
* It is no longer possible to select text while holding down the switch.
* Highlighting effect when clicking the switch on mobile webkit browsers has been removed.
* Fixed bug where dragging the switch would create a strange shadow on IOS.
## [2.1.0 - 2017-11-22]
### Added
- onChange callback function is now given the event that activated the callback as a second argument.
* onChange callback function is now given the event that activated the callback as a second argument.
## [2.0.1 - 2017-11-03]
### Changed
- prop-types is switched from peerDependency to dependency. This should reduce frustration for devs who don't use prop-types in their project, but shouldn't affect anyone else.
## [2,0.0 - 2017-10-31]
* prop-types is switched from peerDependency to dependency. This should reduce frustration for devs who don't use prop-types in their project, but shouldn't affect anyone else.
## [2.0.0 - 2017-10-31]
### Added
- Added some keywords
* Added some keywords
### Changed
- Improved demo with best practices for labels.
- README clarifications
* Improved demo with best practices for labels.
* README clarifications
## [2.0.0-rc.2.1]
### Fixed
- Removed some unnecessary files from the package.
* Removed some unnecessary files from the package.
## [2.0.0-rc.2] - 2017-10-13
### Refactor
- The switch no longer uses the opacity hack to transition between color. This involved stacking two divs on top of each other and varying the opacity of the top div. This caused some weird visual artifacts.
* The switch no longer uses the opacity hack to transition between color. This involved stacking two divs on top of each other and varying the opacity of the top div. This caused some weird visual artifacts.
### Changed
- onColor and offColor props can now only take colors in the form of '#xxxxxx'. Gradients and rgb(xxx, xxx, xxx) are no longer supported.
- handleColor prop is replaced by onHandleColor and offHandleColor.
- The boxShadow the handle gets when selected is now available in the activeBoxShadow prop. The boxShadow prop is now the boxShadow the handle has when it is not selected, and is null by default.
* onColor and offColor props can now only take colors in the form of '#xxxxxx'. Gradients and rgb(xxx, xxx, xxx) are no longer supported.
* handleColor prop is replaced by onHandleColor and offHandleColor.
* The boxShadow the handle gets when selected is now available in the activeBoxShadow prop. The boxShadow prop is now the boxShadow the handle has when it is not selected, and is null by default.
### Fixed
- The switch no longer has a pixel wide gloria of the offColor when checked.
* The switch no longer has a pixel wide gloria of the offColor when checked.
### Removed
- activeHandleColor prop is removed because of lack of usefulness.
* activeHandleColor prop is removed because of lack of usefulness.
## [2.0.0-rc.1] - 2017-10-08
### Added
- New prop boxShadow. It acts just like outline, but I called it boxShadow since that is the actual css attribute that is being controlled.
- New props checkedIcon and uncheckedIcon. They have a checkmark and an x as default. Custom elements can be given as icons or the boolean value 'false', which will remove icons.
* New prop boxShadow. It acts just like outline, but I called it boxShadow since that is the actual css attribute that is being controlled.
* New props checkedIcon and uncheckedIcon. They have a checkmark and an x as default. Custom elements can be given as icons or the boolean value 'false', which will remove icons.
### Refactor
- Dependency on 'react-draggable' is removed and replaced with new drag logic.
* Dependency on 'react-draggable' is removed and replaced with new drag logic.
### Fixed
- Glitch related to faulty 'inTransition' state fixed due to inTransition no longer existing.
* Glitch related to faulty 'inTransition' state fixed due to inTransition no longer existing.
## Changed
- Outline disappears when the users stops holding down the mouse. This is the same behaviour as google's switch-button implementation.
- onChange callback function is now also triggered when enter key is pressed in violation of wai-aria checkbox spec. This is reasonably since it's in the toggle-button spec.
* Outline disappears when the users stops holding down the mouse. This is the same behaviour as google's switch-button implementation.
* onChange callback function is now also triggered when enter key is pressed in violation of wai-aria checkbox spec. This is reasonably since it's in the toggle-button spec.
## Removed
- The deprecated 'name' and 'value' properties are removed.
* The deprecated 'name' and 'value' properties are removed.
## [1.2.0 - 2017-09-29]
### Fixed
- Removed react and react-dom from dependencies.
- Css-file replaced with inline styles to avoid webpack style-loader dependence.
* Removed react and react-dom from dependencies.
* Css-file replaced with inline styles to avoid webpack style-loader dependence.
### Changed
- Cursor style of handle changed to pointer instead of grabbing.
* Cursor style of handle changed to pointer instead of grabbing.
## [1.1.0] - 2017-09-26
### Fixed
- Pressing the spacebar while the switch is focused no longer causes the page to scroll.
- Disabling the switch now sets opacity to 0.5 as it should.
- Fixed glitch where the left property of the switch-handle would be off by one if checked was initially set to true.
* Pressing the spacebar while the switch is focused no longer causes the page to scroll.
* Disabling the switch now sets opacity to 0.5 as it should.
* Fixed glitch where the left property of the switch-handle would be off by one if checked was initially set to true.
### Deprecated
- The 'name' and 'value' properties will be removed in the next major version since I don't believe they serve any purpose in a controlled component.
* The 'name' and 'value' properties will be removed in the next major version since I don't believe they serve any purpose in a controlled component.

8

dist/getBackgroundColor.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -16,3 +16,3 @@ Object.defineProperty(exports, "__esModule", {

var newColor = '#';
var newColor = "#";
for (var i = 1; i < 6; i += 2) {

@@ -24,3 +24,3 @@ var offComponent = parseInt(offColor.substr(i, 2), 16);

if (newComponent.length === 1) {
newComponent = '0' + newComponent;
newComponent = "0" + newComponent;
}

@@ -36,3 +36,3 @@ newColor += newComponent;

}
var sixDigitColor = '#';
var sixDigitColor = "#";
for (var i = 1; i < 4; i += 1) {

@@ -39,0 +39,0 @@ sixDigitColor += color[i] + color[i];

14

dist/icons.js

@@ -16,3 +16,8 @@ "use strict";

"svg",
{ viewBox: "-2 -5 14 20", height: "100%", width: "100%", style: { position: 'absolute', top: 0 } },
{
viewBox: "-2 -5 14 20",
height: "100%",
width: "100%",
style: { position: "absolute", top: 0 }
},
_react2.default.createElement("path", {

@@ -51,3 +56,8 @@ /* eslint-disable max-len */

"svg",
{ height: "100%", width: "100%", viewBox: "-2 -5 17 21", style: { position: 'absolute', top: 0 } },
{
height: "100%",
width: "100%",
viewBox: "-2 -5 17 21",
style: { position: "absolute", top: 0 }
},
_react2.default.createElement("path", {

@@ -54,0 +64,0 @@ d: "M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0",

179

dist/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "__esModule", {

var _react = require('react');
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _icons = require('./icons');
var _icons = require("./icons");
var _getBackgroundColor = require('./getBackgroundColor');
var _getBackgroundColor = require("./getBackgroundColor");

@@ -60,3 +60,3 @@ var _getBackgroundColor2 = _interopRequireDefault(_getBackgroundColor);

_createClass(Switch, [{
key: 'componentWillReceiveProps',
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(_ref) {

@@ -69,3 +69,3 @@ var checked = _ref.checked;

}, {
key: 'render',
key: "render",
value: function render() {

@@ -89,4 +89,4 @@ var _this2 = this;

id = _props.id,
ariaLabelledby = _props['aria-labelledby'],
ariaLabel = _props['aria-label'];
ariaLabelledby = _props["aria-labelledby"],
ariaLabel = _props["aria-label"];
var _state = this.state,

@@ -99,9 +99,15 @@ pos = _state.pos,

var rootStyle = {
position: 'relative',
display: 'inline-block',
position: "relative",
display: "inline-block",
opacity: disabled ? 0.5 : 1,
borderRadius: height / 2,
WebkitTransition: 'opacity 0.25s',
MozTransition: 'opacity 0.25s',
transition: 'opacity 0.25s'
WebkitTransition: "opacity 0.25s",
MozTransition: "opacity 0.25s",
transition: "opacity 0.25s",
touchAction: "none",
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
WebkitUserSelect: "none",
MozUserSelect: "none",
msUserSelect: "none",
userSelect: "none"
};

@@ -113,33 +119,33 @@

margin: Math.max(0, (this.handleDiameter - height) / 2),
position: 'relative',
cursor: disabled ? 'default' : 'pointer',
position: "relative",
background: (0, _getBackgroundColor2.default)(pos, this.checkedPos, this.uncheckedPos, offColor, onColor),
borderRadius: height / 2,
WebkitTransition: isDragging ? null : 'background 0.25s',
MozTransition: isDragging ? null : 'background 0.25s',
transition: isDragging ? null : 'background 0.25s'
cursor: disabled ? "default" : "pointer",
WebkitTransition: isDragging ? null : "background 0.25s",
MozTransition: isDragging ? null : "background 0.25s",
transition: isDragging ? null : "background 0.25s"
};
var checkedIconStyle = {
position: 'relative',
height: height,
width: Math.min(height * 1.5, width - (this.handleDiameter + height) / 2 + 1),
position: "relative",
opacity: (pos - this.uncheckedPos) / (this.checkedPos - this.uncheckedPos),
width: Math.min(height * 1.5, width - (this.handleDiameter + height) / 2 + 1),
height: height,
pointerEvents: 'none',
WebkitTransition: isDragging ? null : 'opacity 0.25s',
MozTransition: isDragging ? null : 'opacity 0.25s',
transition: isDragging ? null : 'opacity 0.25s'
pointerEvents: "none",
WebkitTransition: isDragging ? null : "opacity 0.25s",
MozTransition: isDragging ? null : "opacity 0.25s",
transition: isDragging ? null : "opacity 0.25s"
};
var uncheckedIconStyle = {
height: height,
width: Math.min(height * 1.5, width - (this.handleDiameter + height) / 2 + 1),
position: "absolute",
opacity: 1 - (pos - this.uncheckedPos) / (this.checkedPos - this.uncheckedPos),
width: Math.min(height * 1.5, width - (this.handleDiameter + height) / 2 + 1),
height: height,
position: 'absolute',
right: 0,
top: 0,
pointerEvents: 'none',
WebkitTransition: isDragging ? null : 'opacity 0.25s',
MozTransition: isDragging ? null : 'opacity 0.25s',
transition: isDragging ? null : 'opacity 0.25s'
pointerEvents: "none",
WebkitTransition: isDragging ? null : "opacity 0.25s",
MozTransition: isDragging ? null : "opacity 0.25s",
transition: isDragging ? null : "opacity 0.25s"
};

@@ -151,24 +157,23 @@

background: (0, _getBackgroundColor2.default)(pos, this.checkedPos, this.uncheckedPos, offHandleColor, onHandleColor),
touchAction: 'none',
cursor: disabled ? 'default' : 'pointer',
WebkitTransition: isDragging ? null : 'background-color 0.25s, left 0.25s, box-shadow 0.1s',
MozTransition: isDragging ? null : 'background-color 0.25s, left 0.25s, box-shadow 0.1s',
transition: isDragging ? null : 'background-color 0.25s, left 0.25s, box-shadow 0.1s',
display: 'inline-block',
borderRadius: '50%',
position: 'absolute',
left: pos,
cursor: disabled ? "default" : "pointer",
display: "inline-block",
borderRadius: "50%",
position: "absolute",
transform: "translateX(" + pos + "px)",
top: Math.max(0, (height - this.handleDiameter) / 2),
outline: 0,
boxShadow: hasOutline ? activeBoxShadow : boxShadow,
border: 0,
outline: 0,
boxShadow: hasOutline ? activeBoxShadow : boxShadow
WebkitTransition: isDragging ? null : "background-color 0.25s, transform 0.25s, box-shadow 0.15s",
MozTransition: isDragging ? null : "background-color 0.25s, transform 0.25s, box-shadow 0.15s",
transition: isDragging ? null : "background-color 0.25s, transform 0.25s, box-shadow 0.15s"
};
return _react2.default.createElement(
'div',
"div",
{ className: className, style: rootStyle },
_react2.default.createElement(
'div',
"div",
{
className: 'react-switch-bg',
className: "react-switch-bg",
style: backgroundStyle,

@@ -178,3 +183,3 @@ onClick: disabled ? null : this.handleClick

checkedIcon && _react2.default.createElement(
'div',
"div",
{ style: checkedIconStyle },

@@ -184,3 +189,3 @@ checkedIcon

uncheckedIcon && _react2.default.createElement(
'div',
"div",
{ style: uncheckedIconStyle },

@@ -190,5 +195,5 @@ uncheckedIcon

),
_react2.default.createElement('div', {
className: 'react-switch-handle',
role: 'checkbox',
_react2.default.createElement("div", {
className: "react-switch-handle",
role: "checkbox",
tabIndex: disabled ? null : 0,

@@ -207,9 +212,8 @@ onMouseDown: disabled ? null : this.handleMouseDown,

},
onTransitionEnd: this.handleTransitionEnd,
style: handleStyle,
id: id,
'aria-checked': checked,
'aria-disabled': disabled,
'aria-labelledby': ariaLabelledby,
'aria-label': ariaLabel
"aria-checked": checked,
"aria-disabled": disabled,
"aria-labelledby": ariaLabelledby,
"aria-label": ariaLabel
})

@@ -246,3 +250,4 @@ );

checked = _props2.checked,
onChange = _props2.onChange;
onChange = _props2.onChange,
id = _props2.id;

@@ -253,3 +258,3 @@ // Simulate clicking the handle

_this3.setState({ startX: null, hasOutline: false });
onChange(!checked, event);
onChange(!checked, event, id);
return;

@@ -259,15 +264,25 @@ }

if (pos > (_this3.checkedPos + _this3.uncheckedPos) / 2) {
_this3.setState({ pos: _this3.checkedPos, startX: null, isDragging: false, hasOutline: false });
_this3.setState({
pos: _this3.checkedPos,
startX: null,
isDragging: false,
hasOutline: false
});
return;
}
_this3.setState({ startX: null, isDragging: false, hasOutline: false });
onChange(false, event);
onChange(false, event, id);
return;
}
if (pos < (_this3.checkedPos + _this3.uncheckedPos) / 2) {
_this3.setState({ pos: _this3.uncheckedPos, startX: null, isDragging: false, hasOutline: false });
_this3.setState({
pos: _this3.uncheckedPos,
startX: null,
isDragging: false,
hasOutline: false
});
return;
}
_this3.setState({ startX: null, isDragging: false, hasOutline: false });
onChange(true, event);
onChange(true, event, id);
};

@@ -277,3 +292,3 @@

// Ignore right click and scroll
if (typeof event.button === 'number' && event.button !== 0) {
if (typeof event.button === "number" && event.button !== 0) {
return;

@@ -283,4 +298,4 @@ }

_this3.handleDragStart(event.clientX);
document.addEventListener('mousemove', _this3.handleMouseMove);
document.addEventListener('mouseup', _this3.handleMouseUp);
document.addEventListener("mousemove", _this3.handleMouseMove);
document.addEventListener("mouseup", _this3.handleMouseUp);
};

@@ -295,4 +310,4 @@

_this3.handleDragStop(event);
document.removeEventListener('mousemove', _this3.handleMouseMove);
document.removeEventListener('mouseup', _this3.handleMouseUp);
document.removeEventListener("mousemove", _this3.handleMouseMove);
document.removeEventListener("mouseup", _this3.handleMouseUp);
};

@@ -320,5 +335,6 @@

checked = _props3.checked,
onChange = _props3.onChange;
onChange = _props3.onChange,
id = _props3.id;
onChange(!checked, event);
onChange(!checked, event, id);
};

@@ -329,3 +345,4 @@

checked = _props4.checked,
onChange = _props4.onChange;
onChange = _props4.onChange,
id = _props4.id;
var isDragging = _this3.state.isDragging;

@@ -336,3 +353,3 @@ // Trigger change on spacebar and enter keys (in violation of wai-aria spec).

event.preventDefault();
onChange(!checked, event);
onChange(!checked, event, id);
}

@@ -359,4 +376,4 @@ };

id: _propTypes2.default.string,
'aria-labelledby': _propTypes2.default.string,
'aria-label': _propTypes2.default.string
"aria-labelledby": _propTypes2.default.string,
"aria-label": _propTypes2.default.string
};

@@ -366,6 +383,6 @@

disabled: false,
offColor: '#888',
onColor: '#080',
offHandleColor: '#fff',
onHandleColor: '#fff',
offColor: "#888",
onColor: "#080",
offHandleColor: "#fff",
onHandleColor: "#fff",
handleDiameter: null,

@@ -375,3 +392,3 @@ uncheckedIcon: _icons.uncheckedIcon,

boxShadow: null,
activeBoxShadow: '0px 0px 2px 3px #33bbff',
activeBoxShadow: "0px 0px 2px 3px #33bbff",
height: 28,

@@ -381,6 +398,6 @@ width: 56,

id: null,
'aria-labelledby': null,
'aria-label': null
"aria-labelledby": null,
"aria-label": null
};
exports.default = Switch;

5

package.json
{
"name": "react-switch",
"version": "2.1.0",
"version": "2.2.0",
"description": "Draggable toggle-switch component for react",

@@ -9,2 +9,3 @@ "main": "dist/index.js",

"build:watch": "babel src -w -d dist",
"format": "prettier --write '**/*.{js,jsx,json}'",
"push-examples": "webpack -p && git subtree push --prefix examples/dist origin gh-pages",

@@ -46,2 +47,3 @@ "lint": "eslint --ext .js,.jsx src/ examples/src",

"eslint-config-airbnb": "^16.0.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.7.0",

@@ -52,2 +54,3 @@ "eslint-plugin-jsx-a11y": "^6.0.2",

"jest": "^21.2.1",
"prettier": "^1.9.2",
"raf": "^3.4.0",

@@ -54,0 +57,0 @@ "react": "^16.0.0",

57

README.md
# react-switch
[![npm](https://img.shields.io/npm/v/react-switch.svg)](https://www.npmjs.com/package/react-switch)

@@ -6,7 +7,10 @@ [![npm](https://img.shields.io/npm/dm/react-switch.svg)](https://www.npmjs.com/package/react-switch)

A draggable, customizable and accessible toggle-switch component for React.
<img src="https://media.giphy.com/media/l0IsI0EHlJx2kyCrK/giphy.gif" />
<img src="https://media.giphy.com/media/3ov9k7TupiaveDlQ5O/giphy.gif" />
* **Draggable** with the mouse or with a touch screen.
* **Accessible** to visually impaired users and those who can't use a mouse.
* **Customizable** - Easy to customize size, color and more.
* **Small package size** (<3kb). No dependencies other than _prop-types_.
* **It Just Works** - Sensible default styling. Uses inline styles, so no need to import a separate css file.

@@ -18,2 +22,3 @@ ## Demo

## Installation
```bash

@@ -24,5 +29,6 @@ npm install react-switch

## Usage
```javascript
import React, { Component } from 'react';
import Switch from 'react-switch';
import React, { Component } from "react";
import Switch from "react-switch";

@@ -54,2 +60,3 @@ class SwitchExample extends Component {

```
### Accessibility considerations

@@ -66,22 +73,22 @@

| Prop | Type | Default | Description |
| ---- |----- | ------- | ----------- |
| checked | bool | **Required** | If true, the switch is set to checked. If false, it is not checked. |
| onChange | func | **Required** | Invoked when the user clicks or drags the switch. It is passed one argument, *checked*, which is a boolean that describes the presumed future state of the checked prop. |
| 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 | null | The diameter of the handle, measured in pixels. By default it will be slightly smaller than the height of the switch. |
| uncheckedIcon | element *or* bool | [Default value](https://github.com/yogaboll/react-switch/blob/master/src/icons.jsx) | 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](https://github.com/yogaboll/react-switch/blob/master/src/icons.jsx) | An icon that will be shown on the switch when it is checked. Pass in *false* if you don't want any icon. |
| boxShadow | string | null | The default box-shadow of the handle. You can read up on the box-shadow syntax [on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b). |
| activeBoxShadow | string | '0px 0px 2px 3px #33bbff' | 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 | null | Set as the className of the outer shell of the switch. Useful for positioning the switch. |
| id | string | null | 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. |
| aria-labelledby | string | null | Set as an attribute of the embedded checkbox. This should be the same as the id of a label. You should use this if you don't want your label to be a \<label> element|
| aria-label | string | null | Set as an attribute of the embedded checkbox. Its value will only be seen by screen readers. |
| 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 | null | The diameter of the handle, measured in pixels. By default it will be slightly smaller than the height of the switch. |
| uncheckedIcon | element _or_ bool | [Default value](https://github.com/yogaboll/react-switch/blob/master/src/icons.jsx) | 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](https://github.com/yogaboll/react-switch/blob/master/src/icons.jsx) | An icon that will be shown on the switch when it is checked. Pass in _false_ if you don't want any icon. |
| boxShadow | string | null | The default box-shadow of the handle. You can read up on the box-shadow syntax [on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b). |
| activeBoxShadow | string | '0px 0px 2px 3px #33bbff' | 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 | null | Set as the className of the outer shell of the switch. Useful for positioning the switch. |
| id | string | null | 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. |
| aria-labelledby | string | null | Set as an attribute of the embedded checkbox. This should be the same as the id of a label. You should use this if you don't want your label to be a \<label> element |
| aria-label | string | null | Set as an attribute of the embedded checkbox. Its value will only be seen by screen readers. |

@@ -97,2 +104,2 @@ The following props have to be either 3-digit or 6-digit hex-colors:

MIT
MIT
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc