Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-js-switch
Advanced tools
react-js-switch - npm Package Compare versions
Comparing version 1.0.2 to 1.0.3
| { | ||
| "name": "react-js-switch", | ||
| "version": "1.0.2", | ||
| "version": "1.0.3", | ||
| "description": "Switch is a visual toggle between two mutually exclusive states — on and off.", | ||
@@ -5,0 +5,0 @@ "main": "react-js-switch.js", |
@@ -28,10 +28,28 @@ "use strict"; | ||
| const color = props.color || '#fff'; | ||
| const backgroundColorOn = ((_props$backgroundColo = props.backgroundColor) === null || _props$backgroundColo === void 0 ? void 0 : _props$backgroundColo.on) || '#fc3f7f'; | ||
| const backgroundColorOff = ((_props$backgroundColo2 = props.backgroundColor) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2.off) || '#f9f9f9'; | ||
| const background_color = { | ||
| on: ((_props$backgroundColo = props.backgroundColor) === null || _props$backgroundColo === void 0 ? void 0 : _props$backgroundColo.on) || '#fc3f7f', | ||
| off: ((_props$backgroundColo2 = props.backgroundColor) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2.off) || '#f9f9f9' | ||
| on: backgroundColorOn, | ||
| off: backgroundColorOff | ||
| }; | ||
| const borderColorOn = ((_props$borderColor = props.borderColor) === null || _props$borderColor === void 0 ? void 0 : _props$borderColor.on) || '#fc3f7f'; | ||
| const borderColorOff = ((_props$borderColor2 = props.borderColor) === null || _props$borderColor2 === void 0 ? void 0 : _props$borderColor2.off) || '#e6e6e6'; | ||
| const border_color = { | ||
| on: ((_props$borderColor = props.borderColor) === null || _props$borderColor === void 0 ? void 0 : _props$borderColor.on) || '#fc3f7f', | ||
| off: ((_props$borderColor2 = props.borderColor) === null || _props$borderColor2 === void 0 ? void 0 : _props$borderColor2.off) || '#e6e6e6' | ||
| on: borderColorOn, | ||
| off: borderColorOff | ||
| }; | ||
| const checkTypes = () => { | ||
| if (typeof disabled !== 'boolean') console.error('react-js-switch: props.disabled has invalid value.'); | ||
| if (typeof width !== 'number' || width < 0) console.error('react-js-switch: props.size has invalid value.'); | ||
| if (typeof duration !== 'number' || duration < 0) console.error('react-js-switch: props.duration has invalid value.'); | ||
| if (!new Set(['linear', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce']).has(easingFunction) && typeof easingFunction === 'string' || typeof easingFunction !== 'string' && typeof easingFunction !== 'function') console.error('react-js-switch: props.ease has invalid value.'); | ||
| if (typeof color !== 'string') console.error('react-js-switch: props.color has invalid value.'); | ||
| if (typeof backgroundColorOn !== 'string') console.error('react-js-switch: props.backgroundColor.on has invalid value.'); | ||
| if (typeof backgroundColorOff !== 'string') console.error('react-js-switch: props.backgroundColor.off has invalid value.'); | ||
| if (typeof borderColorOn !== 'string') console.error('react-js-switch: props.borderColor.on has invalid value.'); | ||
| if (typeof borderColorOff !== 'string') console.error('react-js-switch: props.borderColor.off has invalid value.'); | ||
| }; | ||
| checkTypes(); | ||
| const expand_handle_by = width / 2 / 4; | ||
@@ -38,0 +56,0 @@ const [isOn, setIsOn] = (0, _react.useState)((_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : false); |
@@ -13,3 +13,3 @@ # react-js-switch | ||
| ```javascript | ||
| ```jsx | ||
| //... | ||
@@ -41,3 +41,3 @@ | ||
| - Value of the switch, true means 'on', false means 'off'. | ||
| - Value of the switch, `true` means 'on', `false` means 'off'. | ||
@@ -47,3 +47,3 @@ ### size : _[Number] [optional]_ | ||
| - The size of the switch in pixels. | ||
| - **Default Value** 40 | ||
| - **Default Value** `40` | ||
@@ -53,3 +53,3 @@ ### duration : _[Number] [optional]_ | ||
| - Switch On/Off animation duration in ms. | ||
| - **Default Value** 250 | ||
| - **Default Value** `250` | ||
@@ -60,11 +60,17 @@ ### ease : _[String] [optional]_ | ||
| - Easing functions specify the rate of change of the number over time. | ||
| - **Default Value** `easeOutExpo` | ||
| - Avaliable Easing functions : | ||
| `"linear", "easeInSine", "easeOutSine", "easeInOutSine", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInBack", "easeOutBack", "easeInOutBack", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBounce", "easeOutBounce", "easeInOutBounce"` | ||
| - If you want to provide your own timing-function make sure that the function takes one parameter and returns one value. | ||
| - **Default Value** 'easeOutExpo' | ||
| ```javascript | ||
| function easeInQuad(x) { | ||
| return x * x; | ||
| } | ||
| ``` | ||
| ### color : _[String] [optional]_ | ||
| - Custom color for switch circle button. | ||
| - **Default Value** '#fff' | ||
| - **Default Value** `#fff` | ||
@@ -84,6 +90,6 @@ ### backgroundColor : _[String] [optional]_ | ||
| - Disable toggling the switch. | ||
| - **Default Value** false | ||
| - **Default Value** `false` | ||
| ### onChange : _[Function] [optional]_ | ||
| ### onChange : _[ (state: Boolean) => void ] [optional]_ | ||
| - Callback called with the new value when it changes takes a parameter represents switch state. |
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
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 by13.06%
17040
- Lines of code
- increased by5.1%
371
- Number of lines in readme file
- increased by7.14%
90
No dependency changes