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

Comments

[Ali Söylemez]

you can check out react-use for tricky hooks.

[PRANTA Dutta]

I actually used it, it's very well written. But at the same time, I don't think you will need that many hooks, like ever. But, it's a very good library.

[Ivan Jeremic]

This is a not so good idea I think, every project is different and you never need all this is also the reason websites like useHooks.com are websites and not libraries.

[PRANTA Dutta]

That's why I made it modular, which means even though you installed all the hooks, you will import only the hooks you need. Learn more about it here freecodecamp.org/news/modular-prog...