react-switch - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.js

@@ -44,3 +44,3 @@ 'use strict';
     _this.state = {
-      left: props.checked ? props.width - props.height : 1,
+      left: props.checked ? props.width - props.height + 1 : 1,
       inTransition: false,
@@ -83,4 +83,3 @@ startX: null,
     key: 'handleKeyDown',
-    value: function handleKeyDown(_ref) {
-      var keyCode = _ref.keyCode;
+    value: function handleKeyDown(event) {
       var _props3 = this.props,
@@ -92,3 +91,4 @@ checked = _props3.checked,
 
-      if (keyCode === 32 && !isDragging) {
+      if (event.keyCode === 32 && !isDragging) {
+        event.preventDefault();
         onChange(!checked);
@@ -208,5 +208,6 @@ }
             position: 'relative',
-            WebkitTransition: 'background-color 0.2s',
-            MozTransition: 'background-color 0.2s',
-            transition: 'background-color 0.2s'
+            opacity: disabled ? 0.5 : 1,
+            WebkitTransition: 'all 0.2s',
+            MozTransition: 'all 0.2s',
+            transition: 'all 0.2s'
           }
@@ -213,0 +214,0 @@ },

package.json

 {
   "name": "react-switch",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Draggable toggle-switch component for react",
@@ -9,5 +9,8 @@ "main": "dist/index.js",
     "build:watch": "babel src -w -d dist",
+    "build-examples": "webpack -p",
     "lint": "eslint --ext .js,.jsx src/",
     "prepublishOnly": "npm run build",
-    "test": "jest --verbose"
+    "test": "jest --verbose",
+    "start": "webpack-dev-server",
+    "stats": "webpack --profile --json > stats.json"
   },
@@ -32,5 +35,7 @@ "repository": {
     "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
+    "css-loader": "^0.28.7",
     "enzyme": "^2.9.1",
@@ -42,8 +47,14 @@ "eslint": "^4.6.1",
     "eslint-plugin-react": "^7.3.0",
+    "html-webpack-plugin": "^2.30.1",
     "jest": "^21.1.0",
-    "react-test-renderer": "^15.6.1"
+    "react-test-renderer": "^15.6.1",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.8.2"
   },
   "dependencies": {
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
     "react-draggable": "^3.0.3"
   }
 }

README.md

 # react-switch
-Draggable toggle-switch component for react
+A draggable, customizable and accessible toggle-switch component for React. 
+
+## Demo
+
+[Take a look at the demo.](https://yogaboll.github.io/react-switch/)
+
+## Installation
+```bash
+npm install react-switch --save
+```
+
+## Usage
+```javascript
+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 (
+      <div>
+        <label htmlFor="example-switch">Look, an example switch!</label>
+        <Switch
+          onChange={this.handleChange}
+          checked={this.state.checked}
+          id="example-switch"
+        />
+      </div>
+    );
+  }
+}
+```
+
+## API
+
+| 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 | 'grey' | The switch will take on this color when it is *not* checked |
+| onColor | string | 'green' | The switch will take on this color when it is checked. |
+| handleColor | string | 'white' | The handle of the switch will take on this color when it is *not* active. If you use this prop, make sure to also change *activeHandleColor* to something appropriate. |
+| activeHandleColor | string | '#ddd' | The handle of the switch will take on this color when it is active, meaning when it is dragged or clicked. |
+| height | number | 28 | The height of the component, measured in pixels. |
+| width | number | 56 | The width of the component, measured in pixels. |
+| className | string | null | Set as the className of the outer shell of 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. |
+| aria-label | string | null | Set as an attribute of the embedded checkbox. Its value will only be seen by screen readers. |
+
+## License
+
+MIT

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3645176

increased by29985.64%

Number of package files

8

increased by100%

Lines of code

30472

increased by10407.59%

Number of lines in readme file

64

increased by2033.33%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dependency count

6

increased by50%

Dev dependency count

19

increased by46.15%

Dependency changes

• + Addedreact@^15.6.1

• + Addedreact-dom@^15.6.1

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-dom@15.7.0(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-dom@18.3.1(transitive)

• - Removedscheduler@0.23.2(transitive)