7 Awesome React Hooks
Tags: webdev, react, javascript, productivity
Published: 2020-07-04 11:18:02

---
title: 7 Awesome React Hooks
published: true
date: 2020-07-04 08:51:01 UTC
tags: ["webdev", "react", "javascript", "productivity"]
canonical_url: http://livecodestream.dev/post/2020-07-04-7-awesome-react-hooks/
---

Before the release of **React Hooks**, its functional components were a bit limited in usage. I mean, when it comes to working with State, context API, and some Lifecycle methods there was nothing we could do.

But, starting from React 16.8, we have a lot more flexibility to reuse an existing piece of code.

Today, you will learn about the usage of different **React Hooks** to solve everyday problems. So, let’s get ready and follow along with me on this interesting journey.

* * *

## useFiler Hook

There is a very cool collection of hooks by [Christopher Patty](https://github.com/chrisjpatty) which is known as “[**crooks**](https://github.com/chrisjpatty/crooks)".

I personally like its **useFiler** hook because it enables us to create a virtual file system right inside a web browser. Basically, it makes use of the browser’s local storage to manage the files and their contents.

To get started, install the **crooks** package in your application.

```
npm install crooks --save

```

Now, import useFiler hook from crooks.

```react
import { useFiler } from 'crooks'

```

At this point, we are ready to initialize the hook and manage a virtual file system. Here’s a quick example code snippet.

```react
const App = () => {
  const [files, {add, remove, update, clear}] = useFiler("localStorageItem")

  return (
    <div>My Project</div>
  )
}

```

As you can see from the above code that we now have access to `add()`, `remove()`, `update()`, and `clear()` methods. Let’s have a look at how to use them.

### Add File

The `add()` function accepts one required parameter. Here, we need to pass a JSON-serializable data.

```react
add("Save this JSON-serializable data in the file.")

```

A point to be noted is that this function will automatically generate an ID for every new file. But, you can still set a custom ID by passing an integer or string as the second parameter.

### Update File

The `update()` method accepts two arguments. The first one is the ID of the file whereas the second argument is used to pass the new data.

```react
update("abc1234", "New content of file.")

```

### Remove File

Pass the ID of the file in `remove()` function to delete it.

```react
remove("abc1234")

```

### Clear All Files

Call the `clear()` function to remove all files.

```react
clear()

```

* * *

## useFetch Hook

[Steven Persia](https://github.com/stevenpersia) (a MERN Stack developer), has compiled a great list of React Hooks called “[**Captain hook**](https://github.com/stevenpersia/captain-hook)” that is very helpful in everyday tasks.

The next few examples of Hooks will be from his collection, including this one.

**useFetch** can be used to get data from an API. After the request is completed, it will return the response and errors (if any).

Import it in your project.

```react
import useFetch from "hooks/useFetch";

```

Make a request.

```react
const { response, errors } = useFetch("https://api.github.com/users/torvalds/repos");

```

* * *

## useHover Hook

useHover hook belongs to the “Captain hook” collection.

Basically, it tracks the mouse cursor on the screen to detect whether it is placed on a specific element or not. If so, it will trigger the hovered event.

Import the hook.

```react
import useHover from "hooks/useHover";

```

Initialize `useHover` hook.

```react
const [hoverMe, isHovered] = useHover();

```

Here, `hoverMe` refers to the specific HTML element whereas `isHovered` contains a boolean value that can be checked in a conditional statement.

For example, we can use something like this.

```react
<div ref={hoverMe}>{isHovered ? "Hovered!" : "Hover me!"}</div>

```

* * *

## useSlug Hook

Slug is an important part of every web project. In fact, it can also boost the SEO of a website.

That’s why Steven has added `useSlug` in his “Captain hook” collection. We can use it to quickly turn any string into an SEO friendly slug. It’s smart enough to replace any diacritical marks (accents) with its standard counterpart.

For example, it will convert **é** or **è** into **e**.

As usual, we first need to import the hook.

```react
import useSlug from "hooks/useSlug";

```

**Usage:**

While initializing the hook, pass any string (e.g. an article title) as the first parameter. As a result, it will return a well-formed slug that can be used in a project right away.

```react
useSlug("React Hooks! résoudre les problèmes quotidiens");

// react-hooks-resoudre-les-problemes-quotidiens

```

* * *

## useDrag & useDrop Hooks

There is an open-source React Hooks library called “[**ahooks**](https://github.com/alibaba/hooks)". It is actively being developed by the eCommerce giant **Alibaba** together with some volunteer contributors.

At the time of writing this article, it has around 46 Hooks. Each of them is focused on solving a specific problem.

In this section, I’ll introduce you to a pair of Hooks `useDrag` and `useDrop`. By now, you might already get an idea about what they do. But still, I have to mention that they help us with the Drag & Drop functionality of HTML5.

**Install**

```react
npm install ahooks --save

```

**Import the Hooks**

```react
import { useDrag, useDrop } from 'ahooks';

```

**Usage**

First of all, initialize the `useDrag` and `useDrop` Hooks.

`useDrag` return props that are passed to a DOM element. Whereas, `useDrop` returns props that are passed to a drop area. It also informs us whether the dragging element is on top of the drop area or not using a boolean property `isHovering`.

Finally, `useDrop` has four callback functions that are executed based on the type of item dropped.

- onText
- onFiles
- onUri
- onDom

```react
const getDragProps = useDrag();

const [props, { isHovering }] = useDrop({
  onText: (text, e) => {
    alert(`'text: ${text}' dropped`);
  },
  onFiles: (files, e) => {
    alert(`${files.length} file dropped`);
  },
  onUri: (uri, e) => {
    alert(`uri: ${uri} dropped`);
  },
  onDom: (content: string, e) => {
    alert(`custom: ${content} dropped`);
  }
});

```

An HTML5 element that you can drag using a mouse.

```react
<div {...getDragProps(id)}>Draggable Element</div>

```

An HTML5 element where you can drop something.

```react
<div {...props}>
  {isHovering ? 'Release Item Here' : 'Drop Anything Here'}
</div>

```

* * *

## useDarkMode Hook

[Craig Walker](https://github.com/craig1123) originally developed “[**React Recipes**](https://github.com/craig1123/react-recipes)". A popular collection of customized React Hooks.

It offers `useDarkMode` Hook to toggle between light and dark mode of the website theme. After switching the mode, it stores the current value in a localStorage. It means that the user’s preferred mode will be applied right away on all browser tabs where our website is opened.

**Install the library.**

```react
npm install react-recipes --save

```

**Import**

```react
import { useDarkMode } from "react-recipes";

```

**Quick Example**

Basically, `useDarkMode()` returns two things.

- **darkMode** : A boolean value that is true when the dark mode is active.
- **setDarkMode** : It toggles between light and dark mode.

```react
function App() {
  const [darkMode, setDarkMode] = useDarkMode();

  return (
    <div className="header">
      <Toggle darkMode={darkMode} setDarkMode={setDarkMode} />
    </div>
  );
}

```

* * *

## Conclusion

Today, you have learned the use of React Hooks in everyday life. We just saw a few example use cases. But, there are tons of open-source Hooks available that you can include in your projects.

Now, I hope you are comfortable using someone else code in our React projects using Hooks. In fact, the main plus point of React Hooks is that it enables us to write better and reusable code.

Thanks for reading!

* * *
  
If you like the story, please don't forget to subscribe to our free newsletter so we can stay connected: [https://livecodestream.dev/subscribe](https://livecodestream.dev/subscribe)