Top React Hooks — Swipes and States

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 => console.log("swiped right"),
    onSwipedUp: eventData => console.log("swiped up"),
    onSwipedDown: eventData => console.log("swiped down"),
    onSwiping: eventData => console.log("swiping")
  });
  return <div {...handlers}> swipe here </div>;
}

to add more handlers that handlers different kinds of swiping.

React Tracked

The React Tracked is a package that lets us manage shared states.

To install it, we run:

npm install react-tracked

Then we can use it by writing:

import React from "react";
import { createContainer } from "react-tracked";

const useValue = ({ reducer, initialState }) =>
  React.useReducer(reducer, initialState);
const { Provider, useTracked } = createContainer(useValue);

const initialState = {
  count: 0
};

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    default:
      throw new Error(`unknown action type: ${action.type}`);
  }
};

const Counter = () => {
  const [state, dispatch] = useTracked();
  return (
    <div>
      <div>
        <span>Count: {state.count}</span>
        <button type="button" onClick={() => dispatch({ type: "increment" })}>
          increment
        </button>
        <button type="button" onClick={() => dispatch({ type: "decrement" })}>
          decrement
        </button>
      </div>
    </div>
  );
};

export default function App() {
  return (
    <>
      <Provider reducer={reducer} initialState={initialState}>
        <Counter />
        <Counter />
      </Provider>
    </>
  );
}

We create the useValue function which takes the reducer and initial state and pass them to the useReducer hook.

Then we call createContainer get the value.

The reducer is like another reducer we see.

The Counter component gets and sets the state with the useTracked hook.

state has the states we have.

dispatch is a function to dispatch our actions.

Then in App , we use the Provider returns from createContainer to let us share states with the provider.

The state is accessible with anything inside.

reducer has the reducer we created earlier.

initialState has the initial state.

And we put the Counter inside it to let us get and set the shared state.

Conclusion

React Swipeable lets us watch for swipe events and handle them.

React Tracked lets us created shared states like other popular state management solutions.