Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-switch
Advanced tools
react-switch - npm Package Compare versions
Comparing version 2.3.2 to 3.0.0-beta.0
@@ -8,2 +8,17 @@ # Changelog | ||
| ## [3.0.0-beta.0 - 2018-06-06] | ||
| ### Changed | ||
| - Project structure was completely revamped to reduce bundle size: | ||
| 1. Use rollup to bundle the different source files. | ||
| 2. Use buble instead of babel for transpiling since it produces tinier output. | ||
| 3. Remove prop-types from production mode. Prop-types are still there in development mode so developer experience is unchanged. | ||
| 4. Mangle property names with uglify by putting a $-sign at the start of the properties that are safe to mangle. | ||
| ### Fixed | ||
| - Corrected more dead links in README. Thanks, [Valery Bugakov](https://github.com/valerybugakov). | ||
| ## [2.3.2 - 2018-04-20] | ||
@@ -13,3 +28,3 @@ | ||
| * Corrected dead links in README | ||
| - Corrected dead links in README | ||
@@ -20,3 +35,3 @@ ## [2.3.1 - 2018-04-08] | ||
| * Devs now receive a console warning if they have passed an invalid color prop. | ||
| - Devs now receive a console warning if they have passed an invalid color prop. | ||
@@ -27,3 +42,3 @@ ## [2.3.0 - 2017-12-27] | ||
| * Added TypeScript declaration file | ||
| - Added TypeScript declaration file | ||
@@ -34,10 +49,10 @@ ## [2.2.0 - 2017-12-19] | ||
| * onChange callback function is now given the id prop that the user has given as the third argument. | ||
| - 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. | ||
| - 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. | ||
@@ -48,3 +63,3 @@ ## [2.1.0 - 2017-11-22] | ||
| * 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. | ||
@@ -55,3 +70,3 @@ ## [2.0.1 - 2017-11-03] | ||
| * 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. | ||
| - 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. | ||
@@ -62,8 +77,8 @@ ## [2.0.0 - 2017-10-31] | ||
| * 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 | ||
@@ -74,3 +89,3 @@ ## [2.0.0-rc.2.1] | ||
| * Removed some unnecessary files from the package. | ||
| - Removed some unnecessary files from the package. | ||
@@ -81,17 +96,17 @@ ## [2.0.0-rc.2] - 2017-10-13 | ||
| * 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. | ||
@@ -102,21 +117,21 @@ ## [2.0.0-rc.1] - 2017-10-08 | ||
| * 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. | ||
@@ -127,8 +142,8 @@ ## [1.2.0 - 2017-09-29] | ||
| * 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. | ||
@@ -139,8 +154,8 @@ ## [1.1.0] - 2017-09-26 | ||
| * 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. |
| { | ||
| "name": "react-switch", | ||
| "version": "2.3.2", | ||
| "version": "3.0.0-beta.0", | ||
| "description": "Draggable toggle-switch component for react", | ||
| "main": "dist/index.js", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "build": "babel src -d dist", | ||
| "build:dev": "babel src -w -d dist", | ||
| "examples:dev": "webpack-dev-server --mode development", | ||
| "examples:prod": "webpack --mode production", | ||
| "push-examples": "npm run examples:prod && git subtree push --prefix examples/dist origin gh-pages", | ||
| "dev": "concurrently \"npm run lib:dev\" \"npm run demo:dev\"", | ||
| "build": "npm run lib:prod && npm run demo:prod", | ||
| "lib:dev": "rollup -c -w -f cjs -o dist/react-switch.dev.js", | ||
| "lib:prod": "NODE_ENV=production rollup -c -f cjs -o dist/react-switch.min.js", | ||
| "demo:dev": "webpack-dev-server --mode development", | ||
| "demo:prod": "webpack --mode production", | ||
| "deploy-demo": "npm run test && npm run build && git subtree push --prefix examples/dist origin gh-pages", | ||
| "format": "prettier --write '**/*.{js,jsx,json}'", | ||
@@ -16,7 +18,7 @@ "lint": "eslint --ext .js,.jsx src/ examples/src", | ||
| "test:watch": "jest --watch", | ||
| "analyze-bundle": "webpack -p --profile --json > stats.json && webpack-bundle-analyzer stats.json examples/dist -s gzip" | ||
| "analyze-bundle": "webpack --mode production --profile --json > stats.json && webpack-bundle-analyzer stats.json examples/dist -s gzip" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/yogaboll/react-switch.git" | ||
| "url": "git+https://github.com/markusenglund/react-switch.git" | ||
| }, | ||
@@ -26,5 +28,5 @@ "author": "Markus Englund <markus.s.englund@gmail.com>", | ||
| "bugs": { | ||
| "url": "https://github.com/yogaboll/react-switch/issues" | ||
| "url": "https://github.com/markusenglund/react-switch/issues" | ||
| }, | ||
| "homepage": "https://github.com/yogaboll/react-switch#readme", | ||
| "homepage": "https://github.com/markusenglund/react-switch#readme", | ||
| "peerDependencies": { | ||
@@ -35,31 +37,38 @@ "react": "^15.3.0 || ^16.0.0", | ||
| "devDependencies": { | ||
| "babel-cli": "^6.26.0", | ||
| "babel-core": "^6.26.0", | ||
| "babel-eslint": "^8.0.1", | ||
| "babel-loader": "^7.1.2", | ||
| "babel-preset-env": "^1.6.0", | ||
| "babel-preset-react": "^6.24.1", | ||
| "babel-preset-stage-2": "^6.24.1", | ||
| "css-loader": "^0.28.7", | ||
| "enzyme": "^3.1.0", | ||
| "enzyme-adapter-react-16": "^1.0.1", | ||
| "enzyme-to-json": "^3.1.2", | ||
| "eslint": "^4.8.0", | ||
| "eslint-config-airbnb": "^16.0.0", | ||
| "@babel/cli": "^7.0.0-beta.49", | ||
| "@babel/core": "^7.0.0-beta.49", | ||
| "@babel/preset-env": "^7.0.0-beta.49", | ||
| "@babel/preset-react": "^7.0.0-beta.49", | ||
| "babel-core": "^7.0.0-bridge.0", | ||
| "babel-eslint": "^8.2.3", | ||
| "babel-jest": "^23.0.1", | ||
| "babel-loader": "^8.0.0-beta.3", | ||
| "babel-plugin-transform-react-remove-prop-types": "^0.4.13", | ||
| "concurrently": "^3.5.1", | ||
| "css-loader": "^0.28.11", | ||
| "enzyme": "^3.3.0", | ||
| "enzyme-adapter-react-16": "^1.1.1", | ||
| "enzyme-to-json": "^3.3.4", | ||
| "eslint": "^4.19.1", | ||
| "eslint-config-airbnb": "^16.1.0", | ||
| "eslint-config-prettier": "^2.9.0", | ||
| "eslint-plugin-import": "^2.7.0", | ||
| "eslint-plugin-jsx-a11y": "^6.0.2", | ||
| "eslint-plugin-react": "^7.4.0", | ||
| "eslint-plugin-import": "^2.12.0", | ||
| "eslint-plugin-jsx-a11y": "^6.0.3", | ||
| "eslint-plugin-react": "^7.9.1", | ||
| "html-webpack-plugin": "^3.2.0", | ||
| "jest": "^22.4.3", | ||
| "prettier": "^1.9.2", | ||
| "jest": "^23.1.0", | ||
| "prettier": "^1.13.4", | ||
| "raf": "^3.4.0", | ||
| "react": "^16.0.0", | ||
| "react-dom": "^16.0.0", | ||
| "react-test-renderer": "^16.0.0", | ||
| "style-loader": "^0.20.3", | ||
| "webpack": "^4.5.0", | ||
| "webpack-bundle-analyzer": "^2.9.0", | ||
| "webpack-cli": "^2.0.14", | ||
| "webpack-dev-server": "^3.1.2" | ||
| "react": "^16.4.0", | ||
| "react-dom": "^16.4.0", | ||
| "react-test-renderer": "^16.4.0", | ||
| "rollup": "^0.59.4", | ||
| "rollup-plugin-babel": "^4.0.0-beta.4", | ||
| "rollup-plugin-buble": "^0.19.2", | ||
| "rollup-plugin-uglify": "^4.0.0", | ||
| "style-loader": "^0.21.0", | ||
| "webpack": "^4.10.2", | ||
| "webpack-bundle-analyzer": "^2.13.1", | ||
| "webpack-cli": "^3.0.1", | ||
| "webpack-dev-server": "^3.1.4" | ||
| }, | ||
@@ -76,4 +85,4 @@ "keywords": [ | ||
| "dependencies": { | ||
| "prop-types": "^15.6.0" | ||
| "prop-types": "^15.6.1" | ||
| } | ||
| } |
@@ -6,2 +6,3 @@ A draggable toggle-switch component for React. | ||
| [](https://github.com/markusenglund/react-switch) | ||
| [](https://bundlephobia.com/result?p=react-switch) | ||
@@ -11,7 +12,7 @@ <img src="https://media.giphy.com/media/l0IsI0EHlJx2kyCrK/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. | ||
| - **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** - Just 2 kb minified and gzipped. | ||
| - **It Just Works** - Sensible default styling. Uses inline styles, so no need to import a separate css file. | ||
@@ -60,3 +61,3 @@ ## Demo | ||
| ### Accessibility considerations | ||
| ### What's the deal with the label tag? | ||
@@ -68,26 +69,26 @@ 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"). | ||
| 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/). | ||
| 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://markusenglund.github.io/react-switch/). | ||
| ## API | ||
| | 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. | | ||
| | 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](https://github.com/markusenglund/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/markusenglund/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 | _undefined_ | 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 | '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. | | ||
| | 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. | | ||
| | aria-labelledby | string | _undefined_ | 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 | _undefined_ | Set as an attribute of the embedded checkbox. Its value will only be seen by screen readers. | | ||
@@ -109,4 +110,3 @@ The following props have to be either 3-digit or 6-digit hex-colors: | ||
| 2. `$ npm install` | ||
| 3. `$ npm run build:dev` | ||
| 4. `$ npm run examples:dev` in a separate terminal window | ||
| 3. `$ npm run dev` | ||
@@ -123,3 +123,3 @@ 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. | ||
| <br /> | ||
| <a href="https://github.com/yogaboll">Markus Englund<a/> | ||
| <a href="https://github.com/markusenglund">Markus Englund<a/> | ||
| </td> | ||
@@ -126,0 +126,0 @@ <td align="center"> |
New alerts
License Policy Violation
LicenseThis 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 riskPackage 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
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by14.36%
46188
- Lines of code
- increased by7.79%
595
Worsened metrics
- Dev dependency count
- increased by24.14%
36
- Number of low quality alerts
- increased byInfinity%
2
- Number of low supply chain risk alerts
- increased byInfinity%
2
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
Updatedprop-types@^15.6.1