All of Your React Utility Hooks in One Place
Tags: react, hooks, javascript, typescript
Published: 2021-05-19 04:20:42

 # 🛠 All of Your Utility Hooks in One Place.

When using react(or other frameworks like NextJS and Gatsby), we often need to use some kind of hooks to make our lives
a bit easier. But each time, we have to create these hooks ourselves. So I created this library where you can find all
the utility hooks you ever need (Kinda).

### These Lines are _Extremely_ Important

I don't own any of these hooks. I found these hooks on the internet and every time I wanted to use them, I had to search
again and again. So I created this library so that I can use it anytime I want. Don't worry you can use it too 🤝🤝🤝

### Original Hooks Taken from [useHook.ts](https://usehooks-typescript.com/) & [useHook.com](https://usehooks.com/)

### What are React Hooks?

Hooks are a new addition in React that lets you use state and other React features without writing a class. This library
provides easy to understand code examples to help you learn how hooks work and inspire you to take advantage of them in
your next project. Learn more from [react docs](https://reactjs.org/docs/hooks-overview.html)

## Features

- Doesn't have any Dependency (Except for React)
- Only 5 KB in Minified/GZIP
- 100% Modular. Just Use the Hooks you need.
- Detailed Documentation with Example
- Written in Typescript
- Most of the hooks are Generic

### Current Hooks

- [useAsync](https://github.com/prantaDutta/react-util-hooks#useasync)
- [useDebounce](https://github.com/prantaDutta/react-util-hooks#usedebounce)
- [useElementSize](https://github.com/prantaDutta/react-util-hooks#useelementsize)
- [useEventListener](https://github.com/prantaDutta/react-util-hooks#useeventlistener)
- [useFetch](https://github.com/prantaDutta/react-util-hooks#usefetch)
- [useHover](https://github.com/prantaDutta/react-util-hooks#usehover)
- [useImageOnLoad](https://github.com/prantaDutta/react-util-hooks#useimageonload)
- [useIntersectionObserver](https://github.com/prantaDutta/react-util-hooks#useintersectionobserver)
- [useInterval](https://github.com/prantaDutta/react-util-hooks#useinterval)
- [useIsClient](https://github.com/prantaDutta/react-util-hooks#useisclient)
- [useKeyPress](https://github.com/prantaDutta/react-util-hooks#usekeypress)
- [useLocalStorage](https://github.com/prantaDutta/react-util-hooks#uselocalstorage)
- [useLockedBody](https://github.com/prantaDutta/react-util-hooks#uselockedbody)
- [useMedia](https://github.com/prantaDutta/react-util-hooks#usemedia)
- [useOnClickOutside](https://github.com/prantaDutta/react-util-hooks#useonclickoutside)
- [useOnScreen](https://github.com/prantaDutta/react-util-hooks#useonscreen)
- [usePrevious](https://github.com/prantaDutta/react-util-hooks#useprevious)
- [useScreen](https://github.com/prantaDutta/react-util-hooks#usescreen)
- [useScript](https://github.com/prantaDutta/react-util-hooks#usescript)
- [useTimeout](https://github.com/prantaDutta/react-util-hooks#usetimeout)
- [useToggle](https://github.com/prantaDutta/react-util-hooks#usetoggle)
- [useWindowSize](https://github.com/prantaDutta/react-util-hooks#usewindowsize)
- [useSessionStorage](https://github.com/prantaDutta/react-util-hooks#usesessionstorage)
- [useSessionStorageWithObject](https://github.com/prantaDutta/react-util-hooks#usesessionstoragewithobject)

### Usage

### Important

This library doesn't have any default export.

So you shouldn't do the following (remember you can, but you shouldn't):

```js
    import ReactUtilHooks from 'react-util-hooks'
    // OR
    import * as ReactUtilHooks from 'react-util-hooks'
```

Instead, you should only import the hook/hooks you need. Let's say, you only need useClient hook. Do the following

```js
    import {useIsClient} from 'react-util-hooks'
    // OR
    import {useIsClient, useFetch} from 'react-util-hooks'
```

This way, your bundle size will be much smaller, and your app performance will be better. You can also do not
recommended way

```jsx
    import ReactUtilHooks from 'react-util-hooks'
    // Not Recommended
    function app() {
        const isClient = ReactUtilHooks.useIsClient()
    }
```

You will find detailed documentation with examples in [here](https://github.com/prantaDutta/react-util-hooks#readme)

### Conclusion

I didn't write any of these hooks. But I edited and optimized them and bundled them together.

I really hope you like it and feel free to send a PR to add a new hook.

If you want, you can also send a hook request or create a bug [here](https://github.com/prantaDutta/react-util-hooks/issues)

Also, this is my first blog post, so I really hope this isn't too bad.

Thanks