Release 4.0.0-0

4.0.0-0 Pre-release

npm i react-compare-slider@beta
pnpm i react-compare-slider@beta
yarn add react-compare-slider@beta

Features

• New clip property - allows, itemOne, itemTwo or both (default) to be clipped
  • Useful for comparing things with alpha backgrounds), closes #136
• itemTwo is no longer absolutely positioned
  • The size of both itemOne and itemTwo is taken into account when sizing the slider

Breaking Changes

• The slider width no longer defaults to 100% - it uses the intrinsic size of its contents
• Node 18 is now the minimum supported version

Fixes

• Correctly 'disconnect' from the slider on touch devices when the touchend event fires
• CJS version is now published to resolve Jest issues, closes #144
• Slider now sets touch-action: pan-y instead of touch-action: none, allowing it to be scrolled past on touch devices when it fills the screen, closes #134

Changelog

• ci: set install script for compressed size action (d0c1bd1)
• build(deps): upgrade sb to latest v7 (3387f82)
• ci: remove --no-template flag from publish preview (0405456)
• build: BREAKING CHANGE: set min node version to 18 (4de2634)
• build: add cjs build to avoid issues with jest, resolves #144 (c878402)
• ci: replace debug version of pkg-pr-new (dc98418)
• chore: update vscode config (7bd6bb8)
• fix: default touch-action on slider root to pan-y #134 (079620b)
• fix: try only applying touch-action: none when the slider is being dragged #134 (e35d7c4)
• ci: try dev mode version of pkg.pr.new (e6508ca)
• docs: add new real world links (d001886)
• ci: update template arg for pkg preview publish (d808668)
• ci: enable compress action (b3ac921)
• ci: add glob to publish preview example (ed1af8f)
• ci: use example as template for preview package publish (8c73048)
• ci: run preview package publish on pr sync with label (0972cbb)
• ci: set lib in publish preview (a1a69dc)
• ci: publish preview when label is applied and pr is not draft (4079c3b)
• ci: add pkg.pr.new action (aba0ad4)
• doc: update clip docs (86ce7b4)
• docs: add docs for clip and disabled props (5d2adae)
• test: use display block on images inzero bounds tests to ensure correct sizing (6c213fe)
• feat: add clip prop to clip itemOne, itemTwo or all (default) (77dff61)
• Merge remote-tracking branch 'origin/main' into next (356a102)
• feat: add clipItemOne prop (81d1fd9)

Release 3.1.0

• feat: add browsingContext prop closes #133
• feat: add handleContainer prop to useReactCompareSliderRef return value closes #132
• test: add coverage for aria-label on handle container element (7db4b7c)
• fix: move aria-label to handle container button element, closes #130 (54a715c)
• docs(example): log lib version in example (0353d78)

Thanks to @martin-pettersson for their work on #133!

Release 3.0.2-1

• Adds browsingContext prop #133
• Add handleContainer prop to useReactCompareSliderRef return value #132

Release 3.0.2-0

• test: add coverage for aria-label on handle container element (7db4b7c)
• fix: move aria-label to handle container button element, closes #130 (54a715c)
• docs(example): log lib version in example (0353d78)

v3.0.1

Bug Fixes

• fix: ensure position is correctly set when slider is scrolled to (#121)

Thanks to @robinsonjames71 for raising this issue 🙌

v3.0.0 🥳 🎉

v3 is out with a load of new features and a fair few bug fixes!

npm install react-compare-slider@latest
yarn add react-compare-slider@latest
pnpm install react-compare-slider@latest

Checkout out Storybook to see all the new features in action. There's a new Recipes section in addition to examples for each of the new features linked below.

Breaking Changes

• Available as an ES Module only - CJS is no longer supported, closes #81
• The latest two browser versions at time of publishing are supported (and Safari 15.6+)
• Node 16.9.0 or higher is required

Potential Breaking Changes

• clip CSS usage has been replaced with clip-path, closes #113
• mouse|touch events have been replaced with pointer
• Slider movement is now only triggered on left mouse click instead of right or left - touch behaves the same as before, closes #74

Features

• Fully accessible/screen reader friendly, closes #65
• Built-in keyboard navigation via the keyboardIncrement prop, closes #31
• Add support CSS transitions via the transition prop, closes #77
• Slider position can be programatically controlled useReactCompareSliderRef hook, closes #64 #48 #78
• Add ability to disable slider via the disabled prop, closes #51 #91

Bug Fixes

• Allow slider position to be reset to initial position via useReactCompareSliderRef hook, closes #64 #48
• Ensure slider renders correctly in RTL mode, closes #101
• Ensure position is correct when toggling between portrait mode when position is 100, closes #106
• Ensure slider position is correct when initial load is 0 or 100, closes #79

Please open an issue if you encounter any problems.

Commits

• docs: update doc links and label recipes (64d263b)
• build: include src in published package (b50abfb)
• docs: update real world examples and keyboard increment, update contrib (130fd12)
• refactor: pass all handler options to useEventListener hook (2aa74d7)
• refactor: remove early out edge case when position matches to prevent issues with lazy loaded content (4e1d96b)
• chore: old release config file (80d514f)
• test: improve coverage for pointer and keyboard events (b7d8307)
• build: upgrade deps and use latest node lts (06672ba)
• refactor: items with initial zero bounds changing their bounds after mount (646d88e)
• build: add release-it config (0fd892a)
• docs: update real-world examples (0770569)
• docs: move real world examples their own storybook page (79b136d)
• build: use node 21 and replace semantic-release with release-it (41fa859)
• feat(handle): reduce box-shadow spread and increase box-shadow opacity to make handle easier to see on bright backdrops (9331c2e)
• build: replace np with semantic release (732ce0b)
• docs: update storybook and codesandbox links (a30e993)
• build: upgrade deps and add publint (81357a6)
• chore: add funding (3441c4f)
• feat: add black alpha background to handle button and increase line box shadow opacity (4d85242)
• chore: update ignore rules and replace .eslintignore with ignorePaths in .eslintrc (554bb13)
• docs: update readme and add label recipes (725e146)
• ci: yeet codecov in favour of codeclimate, codecov won't merge the coverage files (aab0c56)
• ci: set explicit paths for codecov coverage files (19da038)
• ci: set working dir for compressed size action (ea6ecfe)
• chore: ignore readme and license in lib and update vscode config (26c6b49)
• chore: remove old deps and update readme (617c498)
• types: add UseReactCompareSliderRefReturn to ReactCompareSliderProps type (efaeee2)
• build: use latest node (1515584)
• refactor: move src -> lib/src and split up dependencies (628382e)
• test: exclude unmerged lcov files from codecov (0cee673)
• test: merge lcov files (e684b34)
• ci: upload both sets of coverage to code climate (6908899)
• test: add script to change storybook test coverage output json paths to match root src dir (b6bb97f)
• ci: try only specifying storybook coverage to see if reports are merging correctly (0be0b7e)
• ci: try only specifying storybook coverage for codecov to see if it's not merging reports correctly (02f5f29)
• build: upgrade deps (057b007)
• build: upgrade deps (719599a)
• ci: add code climate coverage action (23b975d)
• ci: set paths to each coverage file (5238fcc)
• build: use esbuild treeshaking to allow use client to be added to modules, dedupe deps (7c92589)
• test: use test lib for mocks in ssr tests so they run on node 16 (495dc7a)
• test: use same test suite for modern and legacy node (2100c6f)
• ci: update ssr test suite (9079178)
• style: disable prettier for snapshots and run prettier on staged html and css files (cc00585)
• test: add tests specifically for node 16 (453c486)
• build: add use client banner to all modules (9791cd3)
• ci: add node 16 ssr test suite (f879765)
• chore: remove --no-release-draft from release script (e0b1949)
• build: set node engine version and run all checks before release (fb39345)
• chore: ignore *.log files (8fdcf6f)
• docs: add recipie for resetting slider position on pointer leave #64 (f57b436)
• refactor: explicitly set and apply capture property for event bindings (ebd9078)
• chore: don't clear ts output in watch move and use pnpm instead of pnpmx for pre-commit hook (c69e950)
• docs: add recipies and transition prop examples (906f534)
• build: upgrade node and pnpm (868e919)
• test(ssr): ensure console warn and error isn't called (e000fd4)
• docs: update demo links, closes #95 (a2ec68d)
• build: set package exports and use c8 to get coverage for ssr tests (6cc66ed)
• docs: update sb, ssr and example (11bc94d)
• ci: update ci to run pr on specific events (95cc205)
• docs(example): use regular vite for demo instead of ssr variant (3046bf9)
• refactor: explicitly set types for main component and use modern ts module config (2cae367)
• build(deps): upgrade deps and fix issues with storybook package hoisting (721b3f3)
• build(example): update deps and package name (39a5fbd)
• chore: update gitignore (4d96d1f)
• test: add ssr tests (b2370d2)
• feat: add transition property and onSliderTransitionEnd callback to animate the slider, closes #77 (54cd6cd)
• docs: point example to latest version (ce2bd06)
• docs: add ssr to local example (9e52683)
• ci: move compressed size action to main ci flow (5c73eca)
• docs: add recipies section (fb6a27d)
• ci: add node and pnpm step to comressed size action (59f743d)
• test: update browser tests (9707881)
• build(deps): add pkg-ok to validate package configuration #81 (e0ff502)
• build: don't hoist any storybook packages to avoid vite hoisting issues, storybookjs/builder-vite/issues/55 (55ce027)
• build: don't hoist @storybook/addon-docs/preview to avoid build errors in ci (0615e84)
• feat: add ability to disable the slider via the disabled prop, closes #91, closes #51 (ea74395)
• build: upgrade all deps and docs (75dc75f)
• feat: add ability to control the slider internal position from the parent, closes #78 (9945769)
• docs: update docs and more comprehensive e2e tests (84a15fb)
• fix: prevent slider handle from exiting container when switching to portrait when position is 100 closes #80 #94 (267ff68)
• refactor: use clip-path and percentages internally, #80 (953da7d)
• ci: remove explicit pull request event triggers (3469f66)
• build: use latest pnpm and expose localhost in CI tests (35fd871)
• build: use node 18 lts and update storybook to use webpack 5, #71 (6705260)
• BREAKING CHANGE: only fire slider position change on left mouse click (or standard touch event) closes #92 (04f24e3)
• refactor: replace touchstart and mousedown event bindings with pointerdown (caafd1a)
• feat: replace mouse and touch events with pointer events, closes #74 (87ba39e)
• style: add eslint rule to separate type and code imports (ca530ba)
• build: add browserslist plugin to tsup and update supported browsers, #closes 81 (60c3a26)
• ci: remove node strategy and hoisting (b17eed0)
• test: update test scripts to use coverage in storybook directory (bdc2849)
• ci: add pnpm to compressed size action (2f05311)
• build: move storybook and example to docs folder, use next ssr for example, bump line width closes #75, use node 18 lts closes #71, use pnpm workspaces closes #70 (66f3a4a)
• test: update test scripts to point to docs repo (e215622)
• ci: add corepack step before node set up (29153f3)
• build: replace tsdx with tsup and move storybook to its own workspace, closes #73 (91f56aa)
• ci: replace install with bootstrap script (37d52aa)
• ci: use pnpm (b8e9213)
• build: move to pnpm and upgrade storybook, closes #70 (29b93aa)
• ci: set node ssl options to workaround build error (6032590)
• ci: use latest node lts and replace custom cache action with node action (6993f66)
• feat: add a11y support (cf02024)
• refactor: merge with master, fix conflicts (86844e5)
• docs: update readme (11a9fc8)
• build(deps): upgrade deps (73a1388)
• Removing unnecessary importOrder rules (943dfeb)
• Sort all imports with the prettier plugin (0e7ea85)
• Add configuration for sort imports plugin (3bf385f)
• Add 'prettier-plugin-sort-imports' as dev dependency (57ed18e)
• docs: add contributing guide and recommended extensions for vs code (c782a79)
• docs: update description for keyboardIncrement (7cb8a48)
• build: run all ...

v2.2.0

Add support for CSS transform: scale() to the ReactCompareSlider component.

• docs: add scaled css demo, add type defs to prop stories 773c1d4
• refactor: move container components to their own module 890a97c
• feat: add support for CSS transform: scale() b36bdde

Thanks to @Tenpi for adding this feature!

v2.1.0...v2.2.0

v2.1.0

• docs: add detailed docs for changePositionOnHover 122989b
• feat: add prop to allow slider position to follow mouse on hover (#54) 38b5024

Thanks to @jsberlanga for adding this feature 🙌

v2.0.3...v2.1.0

v2.0.3

• docs: add browser support to requirements section in readme 9c36ee7
• fix: add vendor prefixed backdropFilter property to handle button for Safari afd870a
• fix: add check to determine if bounds have been synchronised on mount, resolves #37 77eaf98

v2.0.2...v2.0.3

v2.0.2

• fix: instantiate ResizeObserver in effect to avoid SSR errors, resolves #25 3f63195

v2.0.1...v2.0.2