- Add react v19 to peer deps (#357)
- Adding GitHub release workflow (#328) New Features:
- add new
swipeDuration
prop - "allowable duration of a swipe"- A swipe lasting more than
swipeDuration
, in milliseconds, will not be considered a swipe.- Feature mimicked from
use-gesture
swipe.duration
- Feature mimicked from
- Defaults to
Infinity
for backwards compatibility
- A swipe lasting more than
- add new
touchEventOptions
prop that can set the options for the touch event listeners- this provides users full control of if/when they want to set passive
- Defaults to
{ passive: true }
- add new
onTouchStartOrOnMouseDown
prop that is called fortouchstart
andmousedown
. Before a swipe even starts.- combined with
touchEventOptions
allows users the ability to now callpreventDefault
ontouchstart
- combined with
- add new
onTouchEndOrOnMouseUp
prop that is called fortouchend
andmouseup
. - add react 18 to
peerDependencies
Breaking Changes:
- we have dropped support for
es5
transpiled output- we target
es2015
for our transpilation nowswipeable
utilizes object/array spread & const/let natively
- we target
preventScrollOnSwipe
- "new" prop. ReplacespreventDefaultTouchmoveEvent
- same functionality but renamed to be more explicit on its intended use
- fixed bug - where toggling this prop did not re-attach event listeners
- update - we now only change the
passive
event listener option fortouchmove
depending on this prop- see notes in README for more details readme#passive-listener
- Thank you @stefvhuynh
Bug fixes:
- fix bug where directional swiped check allowed
undefined
/falsy values to setcancelablePageSwipe
- fix bug when both
trackTouch
andtrackMouse
were present that triggered an erroneous swipe when the user clicked outside and above the swipeable area
Infrastructure:
- post
size-limit report
to PRs with bundle diff sizes - utilize
rollup
for build & output - upgrade lots of dev dependencies
- 🎉 upgrade to
typescript
v4.6.3
- 🎉 upgrade to
- export/outputs housekeeping and cleaning (mimicked from
react-redux
)- removed/renamed exports from
package.json
:browser
,umd:main
(renameddist
),jsnext:main
(usemodule
),typings
(usetypes
)
- moved exports - old => new
"main": "./dist/react-swipeable.js"
=>"main": "./lib/index.js"
"module": "./dist/react-swipeable.module.js"
=>"module": "es/index.js"
"types": "./dist/index.d.ts"
=>"types": "./es/index.d.ts"
- removed/renamed exports from
- add react v18 to
peerDependencies
- Fix issue with some config properties being set to
undefined
breaking swipeable
delta
prop can now be anobject
specifying different values for each direction- Maintenance
- upgrade to latest version of
microbundle
- remove comments from built files
- attempt to lower size to counter unnecessary increase from
microbundle
upgrade due torollup
output.interop
- attempt to lower size to counter unnecessary increase from
- include type updates influenced by PR #259
- Thank you @jaketodaro
- remove comments from built files
dependabot security updates
- upgrade to latest version of
- Maintenance
- actually include dependabot security updates
- update badge links
- Maintenance
dependabot security updates- Migrate to github actions, remove travis, update badges
- Update examples and provide link via codesandbox
-
Add new event handler prop
onSwipeStart
-
typescript updated to
v4.1.3
and associated deps bumped to be compatible
- Fix issue with
first
property onSwipeEventData
always beingtrue
.first
is now onlytrue
for the first event, thenfalse
for subsequent events- issue #221 and PR #223
- Thank you @feketegy!
New Features:
- include passive event listener option, by default, to internal uses of
addEventListener
- solves issue with chrome and lighthouse - #167
- set
passive
tofalse
only whenpreventDefaultTouchmoveEvent
istrue
. - more details in readme#passive-listener-issue
- add new
onTap
event handler prop which executes its callback after a tap- Thank you @upatel32!
- add new
vxvy
event data property[ deltaX/time, deltaY/time]
- velocity per axis- Thank you @upatel32!
Breaking Changes:
- remove
<Swipeable>
component- see below for an example of how to make your own
- Swipeable component examples
- event data update correctly calculate
deltaX
anddeltaY
- drop support for ie11
- using
addEventListener
options object needs to be polyfilled, browser support
- using
- requires react >= 16.8.3, additionally supports new react v17
Bug fixes:
Infrastructure:
- typescript Converted entire code base, tests, and examples to typescript
- changed type
EventData
->SwipeEventData
- The event data provided for all swipe event callbacks - removed type
SwipeableOptions
- useSwipeableProps
now - removed types associated with
<Swipeable>
component - new type
TapCallback
- callback for the newonTap
prop handler - new type
SwipeDirections
-"Left" | "Right" | "Up" | "Down"
- changed type
- Converted tests to
@testing-library/react
, react testing library - Build bundles with
microbundle
. microbundle- export new "modern" build - via package.json
esmodule
property
- export new "modern" build - via package.json
Maintenance:
- Upgraded all dev dependencies,
jest
,babel
,webpack
,eslint
,prettier
- Add
first
property toeventData
that istrue
for first swipe event issue #160 and PR #162- Thank you @samanpwbb!
- Add
initial
property toeventData
that supplies the inital[x, y]
swipe value coordinates issue #150 and PR #131
- Optimization for
useSwipeable
hook. AddeduseMemo
for handler internals issue #134 and PR #149- Thank you @FaberVitale!
- Add check for
event.cancelable
fortouchmove
events before callingevent.preventDefault()
, issue #128 and PR #145- Thank you @maurispalletti!
- Fix typescript types for
ref
, issue #140 and PR #142- Thank you @mastermatt!
- Fix bug where callbacks/props were not refreshed for
useSwipeable
and<Swipeable>
, issue #136 and PR #138- Thank you @caesarsol and @bas-l!
- Add typescript types for
useSwipeable
and<Swipeable>
, issue #125- Thank you @adambowles!
- Fix for
preventDefaultTouchmoveEvent
in safari issue #127 and PR #131- Thank you @JiiB and @bhj!
- use
ref
callback for both<Swipeable>
anduseSwipeable
to attach all touch event handlersuseSwipeable
's returnedhandlers
now contains a ref callback- Please see disscusion and comments in both #127 and #131 for more details and info.
- fix avoids the
passive: true
issue from chrome document event listeners - fix avoids bug on safari where the
touchmove
event listener needs to be attached before atouchstart
in order to be able to calle.preventDefault
- fix avoids the
- removed
touchHandlerOption
prop- fix above deprecates this prop
- Introduce react hook,
useSwipeable
- Core rewrite to simplify api and trim down bundled size
- Add
size-limit
to help keep bundled size down - Add
es
export via"module": "es/index.js"
topackage.json
- Add
prettier
code formating - [BREAKING] simplify handler event data to allow destructuring
onSwiped = ({ event, direction, absX, absY, velocity}) => console.log('swiped')
- [BREAKING] deprecated
onSwiping{Left|Right|Up|Down}
handler props- can be replaced with direction/
dir
event data onSwiping = ({ dir }) => console.log(`swiping - ${dir}`)
- can be replaced with direction/
- [BREAKING] deprecated props
flickThreshold
stopPropagation
disabled
- [BREAKING] deprecated passing "rest" of props down
- removed additional props besides the ones used by
<Swipeable>
from being passed down- only
className
andstyle
get passed to<Swipeable>
's dom node, defaultdiv
- only
- removed additional props besides the ones used by
- Add
rotationAngle
prop. #103- will allow to set a rotation angle, e.g. for a four-player game on a tablet, where each player has a 90° turned view.
- Thank you @Narquadah and @LarsKumbier!
- fixed bug that happened when if either
onSwiping
oronSwiped
were set we were not callinge.preventDefault()
appropriately
- Add support for calling
preventDefault
on Chrome 56+ via passive event support checking and manual event listener setup. #88- Thank you @kl0tl and @KrashStudio!
- add
disabled
prop. #83 - add
innerRef
prop that allows user to access to<Swipeable>
's inner dom node react ref. #82
- fixed bug where delta was causing a swipe to not be tracked correctly, #74 , thanks @mctep
- Major Change
preventDefaultTouchmoveEvent
defaults tofalse
now #69- This change is in part due to a Chrome56+ change
- Major Change drop support for React 12 & 13,
peerDependencies
updated #64prop-types
added todependencies
#64
- Major Change
trackMouse
now 'tracks' the swipe outside of the swipeable component, #67.- Thanks for example @TanaseHagi
- react 16 added to
peerDependencies
- add
onTap
functionality. Thanks @anicke . #61 #39 - added persisting synthetic event in example via
e.persist()
. This should help people see more details in the console when debugging in the [example](http://stack.formidable.com/react-swipeable/.
- Allow
onMouseDown
,onMouseUp
, andonMouseMove
props to fire appropriately again. #55, thanks @lochstar - Stop using this.state to track swipes, thanks @grantila for pointing out this change and submitting PR, #58. Should provide minor performance gains since
Swipeable
will no longer be callingthis.setState
internally.
- add ability to track mouse events as touch events. Thanks @jakepusateri and @Marcel-G. #51
- add stopPropagation prop for all swipe events, defaults to
false
. See #46 for more info.
- fix React 15.2.0 warning for unknown properties on DOM elements
- Add configurable container element via
nodeName
prop, defaults to'div'
. See #24 and #40 for more info.
- Add preventDefault while swiping when props
onSwipedLeft
,onSwipedRight
,onSwipedUp
, andonSwipedDown
are present. See #21 and #37 for more info.
- Adds
velocity
data toonSwiping
callback - Updated the build process introducing ES2015 and babel
- Adds
preventDefaultTouchMoveEvent
option, defaults to true
- Adds
isFLick
to onSwipe events - Removes React as a peer dep
- Adds onSwiping events
- Fixes onSwipeDown and onSwipeUp events
- Fixes vertical swiping
- Refactors build into jsx.
- Adds onSwipedUp, onSwipedRight, onSwipedDown, onSwipedLeft callbacks.
-
onFlick
prop has been removed. -
onSwipe
now has a 4th argument for the callbackBoolean isFlick
-
Added a prop
flickThreshold
which allows you to customize at what velocity a flick is detected.