⚖️ 5 Useful and Modern Custom Hooks for your React App 🌟
Tags: react, javascript, productivity, showdev
Published: 2020-06-17 13:13:00

Hey guys 😃

Since [the introduction of Hooks in React](https://reactjs.org/docs/hooks-intro.html), you may have used the same repetitive and redundant state logic inside several components. But with the Hooks, we can do it in a much simpler and cleaner way, thanks to __Custom React Hooks__.

The different hooks shared in this article are __simple__ and __avoid code repetition__.

# 5 Custom hooks for you !

You will find below several custom Hooks __without the need to download packages on npm or yarn__. 

![Meme Studio React Hooks](https://dev-to-uploads.s3.amazonaws.com/i/e8i0g3o3d48n2ojet8tj.png)
<figcaption>Created with meme-studio.io</figcaption>

This will allow you to modify them as you wish.

A custom Hook is a __JavaScript__ function whose name starts with `use` and that may call other Hooks. For example, `useTheme` below is our first custom Hook.

__Your version of React must be at least 16.8__.

## `useTheme`: 

Let's start with a simple custom React Hook to help you implement a "light/dark mode" component for your application. The user setting persists to localStorage and the default value is the `prefers-color-schema` value [if this one is supported](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).

This hook makes it easy to __dynamically change the appearance of your app__ using CSS variables.

### The hook:

{% gist https://gist.github.com/viclafouch/08e76fe57fbebfb89ee9263fe9de406f file=use-theme.js %}

And for the CSS, just use the `data-theme` attribute and the power of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to create our themes.

{% gist https://gist.github.com/viclafouch/08e76fe57fbebfb89ee9263fe9de406f file=styles.css %}

***

## `useViewport`: 

The hook will allow you to easily __manage the viewport of the user's device__. You will be able to retrieve the width of the screen but also to know if the screen size corresponds to a mobile, a tablet or a desktop.

### The hook

{% gist https://gist.github.com/viclafouch/7a5423f1ab76b22c253d3ff7c0e2c500 file=use-viewport.js %}

### How to use it:

Your components may be different depending on the width of the screen, but here is an idea of how to use this custom React hook.

![React useViewport](https://dev-to-uploads.s3.amazonaws.com/i/ztpqjs14n3c81ii50wuh.png) 

***

## `useClipboardApi`: 

Do you want to __copy a text or an image__ and read the content from the clipboard ? Well here is a custom Hook using the new [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API).

Feel free to read this article [How to Copy an Image or a Text to Clipboard in Javascript](https://dev.to/viclafouch/the-new-way-to-copy-an-image-or-a-text-to-clipboard-in-javascript-2n1g) I wrote to understand how this API works and the browsers that support it.

In this hook, __two important things__: 

* Reading and writing to the clipboard are asynchronous.
* 2 permissions are required to use the `read` and `write` methods of the clipboard.

### The hook:

{% gist https://gist.github.com/viclafouch/cceefaa8895bd6b6a684e3aa4a5aad14 file=use-clipboard-api.js %}

### How to use it:

A very popular feature on websites is the ability to copy an element to your clipboard by a single click to a button. Let's copy a dynamic text value!

![React useClipboardAPI](https://dev-to-uploads.s3.amazonaws.com/i/4x4w5yukaul6lx0mv30u.png)

***

## `usePageVisibility` :

Have you ever wondered if the tabs/windows are using precious CPU time? Thanks to the [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API), we can detect when users are not viewing or interacting with our website, saving them valuable resources.

The visibility API allows a developer to know when a page has lost the focus. The API sends a `visibilitychange` event of the visibility of the page.

So it can be used for things like:

* Pause a video when the page has lost user focus.
* Change the page title.
* Stop an HTML5 canvas animation when a user is not on the page.
* Display a notification to the user only when the page is active.
* Stop the movement of a carousel.

### The hook:

{% gist https://gist.github.com/viclafouch/52a8a6409c14220492d0183f509c76cd file=use-page-visibility.js %}

### How to use it:

Let's change the title of the page if the user is not viewing the page.

![React usePageVisibility](https://dev-to-uploads.s3.amazonaws.com/i/9sse7jinto5f2nf3h5v3.png)

***

## `useScroll`: 

With this hook, you'll be able to control the scroll `y` of the page and to go back to the top/bottom with a smooth scroll. This can allow you to create an infinity scroll (`fetch()` when `isAtBottom` is `true`).

### The hook:

{% gist https://gist.github.com/viclafouch/259cbc31be65895833072a43d5f44d34 file=use-scroll.js %}

### How to use it:

Let's show a newsletter popup if the user has scrolled to the bottom of the page.

![React useScroll](https://dev-to-uploads.s3.amazonaws.com/i/bx4mswga9jd1p5j90l2f.png)

Voilaaa ! 

Feel free to use these modern hooks ! The links to the gists associated with this article can be found below:

* [useTheme](https://gist.github.com/viclafouch/08e76fe57fbebfb89ee9263fe9de406f)
* [useViewport](https://gist.github.com/viclafouch/7a5423f1ab76b22c253d3ff7c0e2c500)
* [useClipboardApi](https://gist.github.com/viclafouch/cceefaa8895bd6b6a684e3aa4a5aad14)
* [usePageVisibility](https://gist.github.com/viclafouch/52a8a6409c14220492d0183f509c76cd)
* [useScroll](https://gist.github.com/viclafouch/259cbc31be65895833072a43d5f44d34)

Cheers ! 

{% link https://dev.to/viclafouch/a-full-stack-meme-generator-with-react-hooks-express-5dc7 %}

{% link https://dev.to/viclafouch/the-new-way-to-copy-an-image-or-a-text-to-clipboard-in-javascript-2n1g %}