react-switch - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

CHANGELOG.md

		@@ -7,2 +7,6 @@ # Changelog

		## [2.1.0 - 2017-11-22]
		### Added
		- onChange callback function is now given the event that activated the callback as a second argument.

		## [2.0.1 - 2017-11-03]
		@@ -9,0 +13,0 @@ ### Changed

dist/index.js

		@@ -229,3 +229,3 @@ 'use strict';

		this.handleDragStop = function () {
		this.handleDragStop = function (event) {
		var _state2 = _this3.state,
		@@ -242,3 +242,3 @@ pos = _state2.pos,
		_this3.setState({ startX: null, hasOutline: false });
		onChange(!checked);
		onChange(!checked, event);
		return;
		@@ -252,3 +252,3 @@ }
		_this3.setState({ startX: null, isDragging: false, hasOutline: false });
		onChange(false);
		onChange(false, event);
		return;
		@@ -261,3 +261,3 @@ }
		_this3.setState({ startX: null, isDragging: false, hasOutline: false });
		onChange(true);
		onChange(true, event);
		};
		@@ -281,4 +281,4 @@

		this.handleMouseUp = function () {
		_this3.handleDragStop();
		this.handleMouseUp = function (event) {
		_this3.handleDragStop(event);
		document.removeEventListener('mousemove', _this3.handleMouseMove);
		@@ -298,3 +298,3 @@ document.removeEventListener('mouseup', _this3.handleMouseUp);
		event.preventDefault();
		_this3.handleDragStop();
		_this3.handleDragStop(event);
		};
		@@ -306,3 +306,3 @@

		this.handleClick = function () {
		this.handleClick = function (event) {
		var _props3 = _this3.props,
		@@ -312,3 +312,3 @@ checked = _props3.checked,

		onChange(!checked);
		onChange(!checked, event);
		};
		@@ -325,3 +325,3 @@
		event.preventDefault();
		onChange(!checked);
		onChange(!checked, event);
		}
		@@ -328,0 +328,0 @@ };

package.json

		{
		"name": "react-switch",
		"version": "2.0.1",
		"version": "2.1.0",
		"description": "Draggable toggle-switch component for react",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -39,10 +39,10 @@ # react-switch
		return (
		<div>
		<label htmlFor="example-switch">Look, an example switch!</label>
		<label htmlFor="normal-switch">
		<span>Switch with default style</span>
		<Switch
		onChange={this.handleChange}
		checked={this.state.checked}
		id="example-switch"
		id="normal-switch"
		/>
		</div>
		</label>
		);
		@@ -52,3 +52,11 @@ }
		```
		### Accessibility considerations

		The Switch component in the above example is nested inside a label tag. The label tag has an htmlFor-value that is identical to the id-value that is passed to the Switch ("normal-switch").
		These features are there to make the toggle-switch accessible to people with reduced sight who use screen readers. It will make screen readers read out the label text when the toggle-switch is selected. If you instead just put some text next to the switch, the screen reader will just read out "checkbox - not checked" or something like that and the user will have no idea what it is for. (The switch is actually a checkbox under the hood.)

		It's not strictly necessary to both nest the switch inside the label AND use the htmlFor prop to link the label and the switch. It should be enough to do just one. However, using both will ["cover 100% of assistive devices"](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md) and free you from annoying eslint errors.

		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](https://yogaboll.github.io/react-switch/).

		## API
		@@ -55,0 +63,0 @@

react-switch - npm Package Compare versions

Improved metrics