All of Your React Utility Hooks in One Place

# 🛠 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 & useHook.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

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
• useDebounce
• useElementSize
• useEventListener
• useFetch
• useHover
• useImageOnLoad
• useIntersectionObserver
• useInterval
• useIsClient
• useKeyPress
• useLocalStorage
• useLockedBody
• useMedia
• useOnClickOutside
• useOnScreen
• usePrevious
• useScreen
• useScript
• useTimeout
• useToggle
• useWindowSize
• useSessionStorage
• 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):

    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

    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

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

You will find detailed documentation with examples in here

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

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

Thanks