To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

React Swipeable

The React Swipeable package lets us add swipe handlers to our components.

To install it, we run:

npm i react-swipeable

Then we can use it by writing:

import React from "react";
import { useSwipeable } from "react-swipeable";

export default function App() {
  const handlers = useSwipeable({
    onSwiped: eventData => console.log("swiped")
  });
  return (
    <div className="App">
      <div {...handlers}> You can swipe here </div>
    </div>
  );
}

We have the handlers object which has the handlers for swiping.

The object has methods like onSwiped , onSwipedLeft , onSwipedRight , onSwipedUp , onSwipedDown , and onSwiping .

The useSwipeable hook will return those automatically.

All we have to do is pass in an event handler for swiping.

We can also use the Swipeable component.

For instance, we can write:

import React from "react";
import { Swipeable } from "react-swipeable";

export default function App() {
  return (
    <div className="App">
      <Swipeable onSwiped={eventData => console.log("swiped")}>
        You can swipe here!
      </Swipeable>
    </div>
  );
}

to do the same thing.

The eventData has lots of data like x and y coordinates change, velocity, and direction.

#javascript #react #web-development