function QuackQuinder({results}) {
    const {state, dispatch} = useContext(QuackContext);
    const {happy, sad} = state;
    const [gone] = useState(() =&gt; new Set()) // The set flags all the results that are flicked out
    const [props, set] = useSprings(results.length, i =&gt; ({...to(i), from: from(i)})) // Create a bunch of springs using the helpers above
    // Create a gesture, we're interested in down-state, delta (current-pos - click-pos), direction and velocity
    const bind = useDrag(({args: [index], down, movement: [mx], distance, direction: [xDir], velocity}) =&gt; {
        const trigger = velocity &gt; 0.2 // If you flick hard enough it should trigger the card to fly out
        const dir = xDir &lt; 0 ? -1 : xDir &gt; 0 ? 1 : 0 // Direction should either point left or right

        if (down) dispatch({type: 'SET_VOTESTATE', data: dir})
        if (!down) dispatch({type: 'SET_VOTESTATE', data: 0})

        if (!down &amp;&amp; trigger) {
            gone.add(index)
            if (dir == 1) {
                dispatch({type: 'ADD_HAPPY', data: results[index]})
            } else {
                dispatch({type: 'ADD_SAD', data: results[index]})
            }

        }
        set(i =&gt; {

Most popular functions for react-use-gesture

To help you get started, we’ve selected a few react-use-gesture examples, based on popular ways it is used in public projects.

react-use-gesture.useDrag