Wrap your library in a React hook

This is the third and last article in a series on designing a Javascript library for different frameworks to use. In the first article in the series, we have built a vanilla TS/JS library for swipe detection in the browser. Although it can be used in your application built with any popular JS framework as is, we want to go a little further and make our library a first-class citizen when used in the framework of your choice.

In this article, we are going to wrap our swipe detection library in a React hook.

💡 The article implies you are familiar with the public interface of the swipe detection library used under the hood. If you haven't read the first article in the series, this section alone will be enough to follow along with the material of this one.

How should it work

We want to wrap the swipe detection functionality of the underlying library in a reusable React hook. Let's call one useSwipe as it is important to follow the hooks naming convention. This is how the hook will be used in a consumer component:

const swipeElement = useSwipe({
  onSwipeEnd: (event: SwipeEvent) => {
    console.log(`SwipeEnd direction: ${event.direction} and distance: ${event.distance}`);
  }
});

return <div ref={swipeElement}>Swipe me!</div>

Complete solution

The wrapper hook will be quite concise:

import { createSwipeSubscription, SwipeSubscriptionConfig } from 'ag-swipe-core';
import { RefCallback, useCallback } from 'react';
import { Subscription } from 'rxjs';

export const useSwipe = (config: Pick<SwipeSubscriptionConfig, 'onSwipeMove' | 'onSwipeEnd'>): RefCallback<HTMLElement> => {
  let swipeSubscription: Subscription | undefined;

  return useCallback((domElement: HTMLElement) => {
    if (domElement) {
      swipeSubscription = createSwipeSubscription({
        domElement,
        ...config
      });
    } else {
      swipeSubscription?.unsubscribe?.();
    }
  }, []);
}

What we want from the hook is:

• get a reference to the DOM element the swipe listener should be attached.
• react to one being mounted/unmounted to perform subscription and unsubscription tasks correspondingly.

Our first intention could be to use a combination of useRef and useEffect hooks, but what we actually need is a combination of ref and useCallback:

... the callback ref will be called only when the component mounts and unmounts

Couldn't ask for a better fit. If the domElement parameter value coming from ref is truthy i.e. component has been mounted, we call createSwipeSubscription with provided onSwipeMove and/or onSwipeEnd handlers. If the value is falsy i.e. the component has been unmounted, we use the swipeSubscription reference to unsubscribe.

To learn more on how ref and useCallback work together see this section in React documentation.

Wrapping up

You can find the complete library code on GitHub by this link.

And the npm package by this link.

That was it! We have built a simple React hook wrapper for our swipe detection library in 17 lines of code.

This article completes our short series. Thanks for reading and stay tuned!