All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
- Add react@19 as a peerDependency.
- Export package as ESM, fixes incompatibility with Rollup/Vite and makes output slightly smaller (@Niputi)
- Add react@18 as a peerDependency (@smhg)
- Replace Enzyme with React testing library (@smhg)
- Add custom handle icons (@morinted)
- Add
aria-checked
attribute (@monicahung) - Add borderRadius prop
- Prevent setState from being called after component is unmounted (@smhg)
- When the
checked
state is not changed in theonChange
callback, the switch will now go back to its previous position instead of getting stuck halfway. This means the switch will move back and forth if theonChange
callback changes the state after an asynchronous operation. - Support react and react-dom 17 as peer dependencies
- Update all dev depencies
- Minor typescript definition fix.
- It's now possible to give the Switch any prop (such as aria-* props or tabIndex) and it will automatically be passed to the nested
input
-element. - Improved Typescript compatibility by using
exports:named
option in rollup. This could possibly be breaking for some obscure setups.
- Replaced deprecated
componentWillReceiveProps
lifecycle hook withcomponentDidUpdate
, which means it now works in strict mode.
- Now works properly with right-to-left languages.
- Add support for name attribute
- The switch now includes a hidden nested checkbox input, which creates an expience more akin to a normal checkbox - clicking on the label will now cause a toggle, and the VoiceOver screen reader will now reliably read the label.
- The switch will now always fire the onChange event if the dragStop event occurs <250ms after the dragStart event since that feels like a click.
- Aria role changed from "checkbox" to "switch".
- Pressing enter no longer activates the switch (spacebar still does)
- Add new tabIndex prop
- Fix glitch where the clicking the handle wouldn't trigger onChange event when browser window was out of focus on Windows.
- Fix glitch where the switch would disintegrate if it had a parent with text-align set to center or right
- Add the correct gzip badge.
- Some more byte shaving.
- Shave off some extra bytes by setting interop: false in rollup config.
- Fix peculiar glitch when used with preact-compat.
- Project structure was completely revamped to reduce bundle size:
- Use rollup to bundle the different source files.
- Use buble instead of babel for transpiling since it produces tinier output.
- Remove prop-types from production mode. Prop-types are still there in development mode so developer experience is unchanged.
- Mangle property names with uglify by putting a $-sign at the start of the properties that are safe to mangle.
- Corrected more dead links in README. Thanks, Valery Bugakov.
- Corrected dead links in README
- Devs now receive a console warning if they have passed an invalid color prop.
- Added TypeScript declaration file
- onChange callback function is now given the id prop that the user has given as the third argument.
- 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.
- onChange callback function is now given the event that activated the callback as a second argument.
- 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.
- Added some keywords
- Improved demo with best practices for labels.
- README clarifications
- Removed some unnecessary files from the package.
- 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.
- 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.
- The switch no longer has a pixel wide gloria of the offColor when checked.
- activeHandleColor prop is removed because of lack of usefulness.
- 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.
- Dependency on 'react-draggable' is removed and replaced with new drag logic.
- Glitch related to faulty 'inTransition' state fixed due to inTransition no longer existing.
- 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.
- The deprecated 'name' and 'value' properties are removed.
- Removed react and react-dom from dependencies.
- Css-file replaced with inline styles to avoid webpack style-loader dependence.
- Cursor style of handle changed to pointer instead of grabbing.
- 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.
- 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.