Rehook
Eliminate the need to repeatedly implement the same hooks across different projects.
Philosophy
The Headless Logic
Since I started writing code with React in 2018, I've realized that about 25% of my time has been spent repeatedly writing the same patterns and logic for tasks like data fetching, animations, event handling, and storing data in the browser.
These tasks were just in different contexts but essentially the same.
I believe that frontend developers should focus more on the business logic rather than wasting time on implementing custom hooks for their components.
Some important questions I frequently ask myself when developing applications are:
-
If we have headless UI to create our components, is it possible to have headless logic ( hooks ) to integrate it with them?
-
Why do I rely on multiple third-party libraries or packages to integrate custom hooks?
-
After creating a useful custom hook, how can I share it effectively with others?
The last question was very important.
It's not a library or a package to install.
What do you mean by not a library or a package?
Instead of installing it as a dependency via npm, you'll directly integrate it into your project.
Choose the hook you require, then simply copy and paste the corresponding code into your project.
From there, you have full control to customize it to suit your specific needs.
This approach empowers you with ownership and flexibility, enabling you to modify, delete, or expand the code as necessary.
FAQ
Why it's not a library or a package?
I mean you do not install it as a dependency. It is not available or distributed via npm. Pick the hook you need. Copy and paste the code into your project and customize it based on your needs. The code is yours. The idea behind this is to give you ownership and control over the code, allowing you to change, remove or add more code.
Do you plan to publish it as npm package?
No. I have no plans to publish it as an npm package.
Which frameworks are supported
I would say any framework that supports React.
How can I add it to my project?
This project is written in TypeScript. I recommend using TypeScript for your projects as well. Create a folder named hooks inside your project and pick a hook from this list that solves your problem, then import it inside your component. That's it!