Custom react hooks with JSX

Over time our react components become bigger and bigger. The easiest way to fix it is to create more small components. But what to do with components which require some methods or states?

Problem

Let’s take, for example, the modal component. To open and close this component, we need to write the following code during each use

Solution

Let’s wrap now all logic related to toggle modal state to a custom hook

You can continue to use modal props like text and change them during application runtime

Let’s refactor components with the new custom hook

Your code now looks much cleaner!

Codesandbox playground

Comments

[ScriptKavi]

Why create one when you can get all awesome hooks in a single library?

Try scriptkavi/hooks. Copy paste style and easy to integrate with its own CLI