guarahooks

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.

Track outside

Clamp to zero

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

URL

Hooks Library for Software Engineers