diff --git a/README.md b/README.md
index b4fe799c..1b6f40e3 100644
--- a/README.md
+++ b/README.md
@@ -33,11 +33,16 @@ Spread `handlers` onto the element you wish to track swipes on.
onSwipedRight, // After RIGHT swipe (SwipeEventData) => void
onSwipedUp, // After UP swipe (SwipeEventData) => void
onSwipedDown, // After DOWN swipe (SwipeEventData) => void
+ onSwipeStart, // Start of swipe (SwipeEventData) => void *see details*
onSwiping, // During swiping (SwipeEventData) => void
onTap, // After a tap ({ event }) => void
}
```
+#### Details
+- `onSwipeStart` - called only once per swipe at the start and before the first `onSwiping` callback
+ - The `first` property of the `SwipeEventData` will be `true`
+
### Configuration props and default values
```js
diff --git a/__tests__/useSwipeable.spec.tsx b/__tests__/useSwipeable.spec.tsx
index 9ffd8cb5..513e0ced 100644
--- a/__tests__/useSwipeable.spec.tsx
+++ b/__tests__/useSwipeable.spec.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { render, fireEvent, act } from "@testing-library/react";
import { useSwipeable } from "../src/index";
-import { LEFT, RIGHT, UP, DOWN } from "../src/types";
+import { LEFT, RIGHT, UP, DOWN, SwipeableProps } from "../src/types";
import { expectSwipeFuncsDir } from "./helpers";
const DIRECTIONS: [typeof LEFT, typeof RIGHT, typeof UP, typeof DOWN] = [
@@ -34,7 +34,10 @@ const TESTING_TEXT = "touch here";
/*
* Wrapping component for the hook testing
*/
-function SwipeableUsingHook({ nodeName = "div", ...rest }) {
+function SwipeableUsingHook({
+ nodeName = "div",
+ ...rest
+}: SwipeableProps & { nodeName?: string }) {
const eventHandlers = useSwipeable(rest);
const Elem = nodeName as React.ElementType;
return (
@@ -222,6 +225,33 @@ describe("useSwipeable", () => {
);
});
+ it("correctly calls onSwipeStart for first swipe event", () => {
+ const onSwipeStart = jest.fn();
+ const { getByText } = render(
+
+ );
+
+ const touchArea = getByText(TESTING_TEXT);
+
+ // first swipe
+ fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+ fireEvent[TM](touchArea, cte({ x: 100, y: 125 }));
+ fireEvent[TM](touchArea, cte({ x: 100, y: 150 }));
+ fireEvent[TM](touchArea, cte({ x: 100, y: 175 }));
+ fireEvent[TE](touchArea, cte({}));
+
+ expect(onSwipeStart).toHaveBeenCalledTimes(1);
+
+ // second swipe
+ fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+ fireEvent[TM](touchArea, cte({ x: 125, y: 125 }));
+ fireEvent[TM](touchArea, cte({ x: 150, y: 150 }));
+ fireEvent[TM](touchArea, cte({ x: 175, y: 175 }));
+ fireEvent[TE](touchArea, cte({}));
+
+ expect(onSwipeStart).toHaveBeenCalledTimes(2);
+ });
+
it("calls preventDefault when swiping in direction that has a callback", () => {
const onSwipedDown = jest.fn();
@@ -346,22 +376,22 @@ describe("useSwipeable", () => {
expectSwipeFuncsDir(swipeFuncsLeft, LEFT);
// check up
- const swipeFunsUp = getMockedSwipeFunctions();
- rerender();
+ const swipeFuncsUp = getMockedSwipeFunctions();
+ rerender();
fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
fireEvent[TM](touchArea, cte({ x: 125, y: 100 }));
fireEvent[TM](touchArea, cte({ x: 150, y: 100 }));
fireEvent[TE](touchArea, cte({}));
- expectSwipeFuncsDir(swipeFunsUp, UP);
+ expectSwipeFuncsDir(swipeFuncsUp, UP);
// check down
- const swipeFunsDown = getMockedSwipeFunctions();
- rerender();
+ const swipeFuncsDown = getMockedSwipeFunctions();
+ rerender();
fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
fireEvent[TM](touchArea, cte({ x: 75, y: 100 }));
fireEvent[TM](touchArea, cte({ x: 50, y: 100 }));
fireEvent[TE](touchArea, cte({}));
- expectSwipeFuncsDir(swipeFunsDown, DOWN);
+ expectSwipeFuncsDir(swipeFuncsDown, DOWN);
});
it('Handle "odd" rotations', () => {
diff --git a/src/index.ts b/src/index.ts
index fd90aeab..2d3d9755 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -149,6 +149,10 @@ function getHandlers(
vxvy,
};
+ // call onSwipeStart if present and is first swipe event
+ eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
+
+ // Call onSwiping if present
props.onSwiping && props.onSwiping(eventData);
// track if a swipe is cancelable(handler for swiping or swiped(dir) exists)
diff --git a/src/types.ts b/src/types.ts
index 77785d2b..7d5cec7a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -29,6 +29,7 @@ export type TapCallback = ({ event }: { event: HandledEvents }) => void;
export type SwipeableCallbacks = {
// Event handler/callbacks
+ onSwipeStart: SwipeCallback;
onSwiped: SwipeCallback;
onSwipedDown: SwipeCallback;
onSwipedLeft: SwipeCallback;