You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Then, building upon the reducer logic, the `<Carousel>` is constructed. We hold the number of items within a count of `numItems`. We utilize the reducer within the `React.useReducer` hook.
88
88
89
-
By creating `slide`, as a `const`, we can utilize that later in the component, calling it within `useSwipeable`: called upon `slide(NEXT)` and `slide(PREV)`, invoking the `dispatch` and the `timeout` we built within `slide`. Within the use of `useSwippeable`, we set `swipeDuration` to `500ms`. We set `preventScrollOnSwipe` to `true`, and `trackMouse` to `true`.
89
+
By creating `slide`, as a `const`, we can utilize that later in the component, calling it within `useSwipeable`: called upon `slide(NEXT)` and `slide(PREV)`, invoking the `dispatch` and the `timeout` we built within `slide`. Within the use of `useSwipeable`, we set `swipeDuration` to `500ms`. We set `preventScrollOnSwipe` to `true`, and `trackMouse` to `true`.
90
90
91
91
At the end, we return the component itself, built with the components we've created, with `handlers` passed into the wrapping `<div>` around the surrounding container. The `<CarouselContainer>` holds the directional and sliding state, and within that container the items we want to display are mapped as `React.Children`, utilizing `getOrder`.
Copy file name to clipboardExpand all lines: docs/docs/examples/simple-pattern.mdx
+189
Original file line number
Diff line number
Diff line change
@@ -4,5 +4,194 @@ import SimplePattern from '@site/src/components/examples/SimplePattern'
4
4
5
5
# Simple Pattern
6
6
7
+
Below is an example implementation of a simple pattern which utilizes the hooks provided by `react-swipeable` within a TypeScript context.
8
+
9
+
## Simple Pattern Code Source
10
+
11
+
You can see this full example as pure code within the [Pattern.tsx](https://github.com/FormidableLabs/react-swipeable/blob/main/examples/app/SimplePattern/pattern.tsx) file within the React-Swipeable repo directly.
In our example, we utilize SVGs for our `UpArrow` and `DownArrow` to give indications of when someone is successfully activating the pattern for user feedback, but know you can use whatever UI library of your choice, or stylize your own!
Next, we set up our types for the `Directions`, `CarouselState`, and `CarouselAction`.
56
+
57
+
```typescript
58
+
typeDirection=typeofPREV|typeofNEXT;
59
+
60
+
interfaceCarouselState {
61
+
pos:number;
62
+
sliding:boolean;
63
+
dir:Direction;
64
+
}
65
+
66
+
typeCarouselAction=
67
+
| { type:Direction, numItems:number }
68
+
| { type:'stopSliding' };
69
+
```
70
+
71
+
Below, we create a function called `getOrder`, which drives the position of each item in the carousel, and what order of position each will be displayed in the context of the carousel. Then, we set a `pattern` as an array of the pattern we want the user to follow to unlock the slide action. Finally here, we then set `getInitialState`, setting the position of the initial items, the `sliding`, as false, and the direction.
At the bottom of the file, we set up a reducer for controlling the action of the Carousel utilizing a switch to set the `CarouselState` logic.
86
+
87
+
```typescript
88
+
function reducer(state:CarouselState, action:CarouselAction):CarouselState {
89
+
switch (action.type) {
90
+
casePREV:
91
+
return {
92
+
...state,
93
+
dir: PREV,
94
+
sliding: true,
95
+
pos: state.pos===0?action.numItems-1:state.pos-1
96
+
};
97
+
caseNEXT:
98
+
return {
99
+
...state,
100
+
dir: NEXT,
101
+
sliding: true,
102
+
pos: state.pos===action.numItems-1?0:state.pos+1
103
+
};
104
+
case'stopSliding':
105
+
return { ...state, sliding: false };
106
+
default:
107
+
returnstate;
108
+
}
109
+
}
110
+
```
111
+
112
+
Then, building upon the reducer logic, the `<Carousel>` is constructed. We hold the number of items within `numItems`, and utilize the reducer within the `React.useReducer` hook.
113
+
114
+
By creating the `slide`, as a `const`, we can utilize that to call within `handleSwiped` as an action that is called upon the user successfully execution of the pattern.
115
+
116
+
It may help to briefly look at the `handlers` for a moment, and how we utilize `useSwipeable`. Within this, with each `onSwiped`, we call `handleSwiped`. So for each swipe the user takes within the text box above the carousel, we execute `handleSwiped` and pass along the `eventData`. If the `eventData.dir` matches the pattern for this indexed (`pIdx`) item, and the direction indicated, then we `setPIdx` to a greater number.
117
+
118
+
What does this do? Two things: it helps us know when the user successfully got to the end of the pattern, and activate the `slide` action, and it also controls the arrows activating the color within the `<PatternBox>` to give feedback to the user that they were successful in activating the steps of the pattern!
119
+
120
+
Two other important items to note: we utilized `onTouchStartOrOnMouseDown` to pass through `event.preventDefault()` as a callback, and used `touchEventOptions: {passive: false}` in case certain browsers ignored the `preventDefault()` callback bubbling up.
121
+
122
+
From there, the rest of the UI of the component is built. The `<PatternBox>` holds where the user swipes in order to interact with the Carousel itself, along with the arrows that give the feedback to the user that the pattern was successful. The `<CarouselContainer>` holds the Carousel display and items. Our Simple Pattern is complete!
Copy file name to clipboardExpand all lines: examples/app/SimplePattern/index.tsx
+1-4
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ import Carousel from './pattern';
7
7
functionSimplePattern(){
8
8
return(
9
9
<div>
10
-
<h5style={{marginBottom: '20px'}}>
10
+
<h5style={{marginBottom: '20px'}}>
11
11
<strong>👉 Swipe pattern</strong>
12
12
</h5>
13
13
<Carousel>
@@ -17,9 +17,6 @@ function SimplePattern() {
17
17
<Itemimg="https://unsplash.it/478/205"/>
18
18
<Itemimg="https://unsplash.it/479/205"/>
19
19
</Carousel>
20
-
<h6>
21
-
<ahref="https://github.com/FormidableLabs/react-swipeable/blob/main/examples/app/SimplePattern/pattern.tsx">See code</a> for example usage of <code>onTouchStartOrMouseDown</code> and <code>touchEventOptions</code>
0 commit comments