Top React Hooks — Swipes and States

Photo by Christiann Koepke on Unsplash

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

React Swipeable

React Swipeable is a library that lets us handle swipe events in our app.

For instance, we can write:

import React from "react";
import { useSwipeable, Swipeable } from "react-swipeable";
export default function App() {
  const handlers = useSwipeable({
    onSwiped: eventData => console.log("swiped")
  });
  return <div {...handlers}> swipe here </div>;
}

We use the useSwipeable hook which takes an object with some options.

onSwiped is a callback that runs when the we swipe on the elements with the handlers .

We can add options to the 2nd argument of the useSwipeable hook.

For instance, we can write:

import React from "react";
import { useSwipeable, Swipeable } from "react-swipeable";
export default function App() {
  const handlers = useSwipeable({
    onSwiped: eventData => console.log("swiped"),
    onSwipedLeft: eventData => console.log("swiped left"),
    onSwipedRight: eventData…