DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for All of Your React Utility Hooks in One Place
PRANTA Dutta
PRANTA Dutta

Posted on

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

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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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()
    }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (4)

Collapse
ivanjeremic profile image
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.

Collapse
pranta profile image
PRANTA Dutta Author • Edited on

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...

Collapse
alisoylemez profile image
Ali SΓΆylemez

you can check out react-use for tricky hooks.

Collapse
pranta profile image
PRANTA Dutta Author

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.

🌚 Life is too short to browse without dark mode