Before the release of React Hook, users using functional components would feel pretty much restricted. Users will find it difficult to manipulate state, context API or lifecycle method.

However, starting from React 16.8, React hook was born and we have very flexible tools to reuse existing code.

In this article, I will introduce some useful React hooks that can solve daily problems.

useFiler Hook

I really like using the useFiler it allows us to create a virtual file system (virtual file system) right on the web browser. Basically, it uses local storage to manage the files and their contents.

To use it, we need to install the crooks package in the application:

Then import useFiler hook from crooks:

Now that we can easily create hooks and manage files, here’s an example:

As you can see in the above code, we can use the add() , remove() , update() , clear() . Let’s find out how to use them.

Add file

The add () function accepts 1 parameter, here we need to pass JSON-serializable:

Note: This function will automatically generate a new ID for the newly created file, but we can customize the ID by passing an integer or a string as the second argument.

Update file

The update () function requires two parameters, the first is the ID of the file, the second is the new data to pass:

Remove file

Pass the file ID in the remove () function to delete

Clear all files

Call the clear () function to delete all files:

useFetch Hook

UseFetch can be used to retrieve data from the API. After the request is made, it will return a response or errors (if any).

Import into the project:

Create a test request:

useHover Hook

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

Import into the project:

Initialization:

Here, hoverMe points to the specific HTML element, while isHovered is a boolean value to check the condition.

useSlug Hook

Slug is a very important component in every web project, it can increase your site’s SEO.

For example, it will convert é or è into e

As usual, we need to import:

When initializing the hook, pass any string (possibly article name) into the first argument. The result will be a well-form slug.

useDrag and useDrop Hooks

These 2 hooks are very useful when using the drag-and-drop functionality of HTML5

Setting:

import:

Using

First we need to initialize useDrag and useDrop

useDrag will return the props passed to the DOM element. useDrop returns the props passed to the drop area, it also informs us whether the drag element is at the top of the drop area by using the boolean property ( isHovering ).

Finally, useDrop has four callbacks that execute each type of drag-and-drop item: onText , onFiles , onUri , onDom

useDarkMode Hook

useDarkMode hook handles the transition between light and dark modes of the website. After conversion, it will save the current value into a localStorage . This means that the user’s choice will be applied as soon as the website is opened.

Library settings:

Import:

Basically, useDarkMode() returns 2 messages:

• darkMode : is a boolean value that returns true if darkmode is enabled
• setDarkMode : handles the selection between light and dark mode

Conclude

Above we have a few examples of quite useful React hooks that can be applied to your project. In fact, the main benefit of using React Hook is that it allows us to reuse the code easily, so we can use the open-source Hooks as above.

References

• https://medium.com/better-programming/7-awesome-react-hooks-38b81f3cbd0a
• https://reactjs.org/docs/hooks-intro.html