React Swipe event handler hook
React swipe event handler hook
Visit the Docs site for information on usage, api, and demos.
Please see our contributions guide.
Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
FormidableLabs
swipeDuration prop - "allowable duration of a swipe"swipeDuration, in milliseconds, will not be considered a swipe.use-gesture swipe.durationInfinity for backwards compatibilitytouchEventOptions prop that can set the options for the touch event listeners{ passive: true }onTouchStartOrOnMouseDown prop that is called for touchstart and mousedown. Before a swipe even starts.touchEventOptions allows users the ability to now call preventDefault on touchstartonTouchEndOrOnMouseUp prop that is called for touchend and mouseup.peerDependenciesBreaking Changes:
es5 transpiled outputes2015 for our transpilation nowswipeable utilizes object/array spread & const/let nativelypreventScrollOnSwipe - "new" prop. Replaces preventDefaultTouchmoveEventpassive event listener option for touchmove depending on this propBug fixes:
undefined/falsy values to set cancelablePageSwipe
trackTouch and trackMouse were present that triggered an erroneous swipe when the user clicked outside and above the swipeable area
Infrastructure:
size-limit report to PRs with bundle diff sizesrollup for build & output
typescript v4.6.3react-redux)package.json:browser, umd:main(renamed dist), jsnext:main(use module), typings(use types)"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"peerDependenciesundefined breaking swipeable
delta prop can now be an object specifying different values for each direction
microbundlemicrobundle upgrade due to rollup output.interopAdd new event handler prop onSwipeStart
typescript updated to v4.1.3 and associated deps bumped to be compatible
first property on SwipeEventData always being true.first is now only true for the first event, then false for subsequent eventsNew Features:
addEventListenerpassive to false only when preventDefaultTouchmoveEvent is true.onTap event handler prop which executes its callback after a tapvxvy event data property[ deltaX/time, deltaY/time] - velocity per axisBreaking Changes:
<Swipeable> componentdeltaX and deltaY
addEventListener options object needs to be polyfilled, browser supportBug fixes:
Infrastructure:
EventData -> SwipeEventData - The event data provided for all swipe event callbacksSwipeableOptions - use SwipeableProps now<Swipeable> componentTapCallback - callback for the new onTap prop handlerSwipeDirections - "Left" | "Right" | "Up" | "Down"@testing-library/react, react testing librarymicrobundle. microbundleesmodule property
Maintenance:
jest, babel, webpack, eslint, prettierfirst property to eventData that is true for first swipe event issue #160 and PR #162initial property to eventData that supplies the inital [x, y] swipe value coordinates issue #150 and PR #131useSwipeable hook. Added useMemo for handler internals issue #134 and PR #149event.cancelable for touchmove events before calling event.preventDefault(), issue #128 and PR #145ref, issue #140 and PR #142useSwipeable and <Swipeable>, issue #136 and PR #138useSwipeable and <Swipeable>, issue #125preventDefaultTouchmoveEvent in safari issue #127 and PR #131ref callback for both <Swipeable> and useSwipeable to attach all touch event handlersuseSwipeable's returned handlers now contains a ref callbackpassive: true issue from chrome document event listenerstouchmove event listener needs to be attached before a touchstart in order to be able to call e.preventDefaulttouchHandlerOption propuseSwipeablesize-limit to help keep bundled size downes export via "module": "es/index.js" to package.jsonprettier code formatingonSwiped = ({ event, direction, absX, absY, velocity}) => console.log('swiped')onSwiping{Left|Right|Up|Down} handler propsdir event dataonSwiping = ({ dir }) => console.log(`swiping - ${dir}`)flickThresholdstopPropagationdisabled<Swipeable> from being passed downclassName and style get passed to <Swipeable>'s dom node, default divrotationAngle prop. #103onSwiping or onSwiped were set we were not calling e.preventDefault() appropriatelypreventDefault on Chrome 56+ via passive event support checking and manual event listener setup. #88disabled prop. #83innerRef prop that allows user to access to <Swipeable>'s inner dom node react ref. #82preventDefaultTouchmoveEvent defaults to false now #69peerDependencies updated #64prop-types added to dependencies #64trackMouse now 'tracks' the swipe outside of the swipeable component, #67.peerDependenciesonTap functionality. Thanks @anicke . #61 #39e.persist(). This should help people see more details in the console when debugging in the [example](http://stack.formidable.com/react-swipeable/.onMouseDown, onMouseUp, and onMouseMove props to fire appropriately again. #55, thanks @lochstarSwipeable will no longer be calling this.setState internally.false. See #46 for more info.nodeName prop, defaults to 'div'. See #24 and #40 for more info.onSwipedLeft, onSwipedRight, onSwipedUp, and onSwipedDown are present. See #21 and #37 for more info.velocity data to onSwiping callbackpreventDefaultTouchMoveEvent option, defaults to trueisFLick to onSwipe eventsonFlick prop has been removed.
onSwipe now has a 4th argument for the callback Boolean isFlick
Added a prop flickThreshold which allows you to customize at what velocity a flick is detected.