guarahooks

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.

useDidUpdate

This example uses the useDidUpdate hook to execute a function when the count state is updated.

usePagination

Example of pagination using the usePagination hook.

Page: 1 of 10

Items per page: 10

useScrollLock

This component demonstrates locking and unlocking scroll on an element or the page.

Container scroll locked: No

Content line 1

Content line 2

Content line 3

Content line 4

Content line 5

Content line 6

Content line 7

Content line 8

Content line 9

Content line 10

Content line 11

Content line 12

Content line 13

Content line 14

Content line 15

Content line 16

Content line 17

Content line 18

Content line 19

Content line 20

Page scroll locked: No

Try scrolling this container or the page and use the buttons above.

useKeypress

This component uses the useKeypress hook to detect key combinations.

Press Ctrl+M (Windows/Linux) or Cmd+M (Mac)

Shortcut pressed 0 times.

Press Ctrl+K to reset the count.

useCopyToClipboard

This component uses the useCopyToClipboard hook to copy text to the clipboard.

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.

useSet

This component uses the useSet hook to manage a set of values.

Fruits in the Set:

apple
banana

Set (doesn't modify the state): ["apple","banana"]

useInterval

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

Count: 0

useMap

This component uses the useMap hook to manage a map of key/value pairs.

Entries in the Map:

key1: value1

Map (doesn't modify the state): [["key1","value1"]]

useDebounceCallback

This component uses the useDebounceCallback hook to debounce the callback function to control the input value.

Imediate value:

Debounced value:

useTimeout

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

Click "Start" to begin the timeout.

useOnMount

This example uses the useOnMount hook to execute a function only once when the component is mounted.

Waiting for mount...

Check console for more information.

guarahooks

Hooks Library for Software Engineers

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.