Top React Hooks — Swipes and States

Image for post
Image for post
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:

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:

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:

Then we can use it by writing:

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.

Image for post
Image for post
Photo by Braden Collum on Unsplash

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store