✨ Introducing you to the CLI ⚙️ - Manage your hooks with ease.

69

Hooks Library for Software Engineers

Free and open-source hooks build with React and TypeScript. Perfect for your next application. Shadcn inspired.

Currently with 41 hooks.

Showcase

Companies and indie-hackers choose guarahooks to build their apps.

Hooks Demo

Here are some of the hooks that you can use to build your apps.

useKeypress
This component uses the useKeypress hook to detect key combinations.

Press Ctrl+M (Windows/Linux) or Cmd+M (Mac) to see some magic.

useIdle
This component uses the useIdle hook to detect if the user is idle for a given timeout (2 seconds).
The user is

idle

Interact with the page (keyboard, mouse, scroll, etc) to reset the idle timer.

useWindowSize
This component uses the useWindowSize hook to get the current window size.

Width: 1024

Height: 768

Resize the window to see the values changing.

useMouse
This component uses the useMouse hook to track the mouse position.

Mouse position in document - x:0 y:0

Mouse position in element - x:0 y:0

Element position- x:0 y:0

Element dimensions - 0x0

Try moving your mouse around the screen.

useInterval
This component uses the useInterval hook to increment a counter every second.

Count: 0

useOS
This hook detects the user's operating system.

Operating System detected:

Unable to determine the operating system.

Value returned from useOS:

undetermined

useTimeout
This component demonstrates the useTimeout hook. Click start to trigger a timeout.

Click "Start" to begin the timeout.

useFetch
Demonstrates the useFetch hook with a 5s artificial delay so you can test the Abort button.
useToggle
This component uses the useToggle hook to toggle a boolean state.

The state is: Off

GET Request
Fetch data from an API endpoint