Hooks

Battle tested hooks that can be reused and are safe to use within SSR environments.

List

• useCurrentBreakpoint - Context + Hook to track current CSS breakpoint by leveraging matchMedia.
• useDebounce - Hook to debounce a quickly changing value, so it doesn't re-render as much.
• useDebouncedCallback - Hook to debounce an effect that's quickly called.
• useEffectAfterRender - Hook that only dispatches the effect if the component is mounted.
• useEvent - Hook for addEventListener to any element.
• useFocusTrap - Hook to trap focus inside a DOM element. This is great for trapping the focus within a Modal for example.
• useIsMounted - Hook that returns a function that will yield the current mount state of the component.
• useIsTransitioning - Context + Hook that tracks routeChange events from Next's Router.
• useKey - A convenient wrapper around useEvent to handle key presses allowing to send either the key being watched, a function to evaluate or any truthy/falsy value.
• useOnClickOutside - Hook to add a handler to be executed when the user clicks outside a given ref.
• useOnMount - Hook to add a handler to be executed when the component mounts.
• useOnWindowResize - Hook to attach a handler to window resize.
• useSafeLayoutEffect - Alias hook to safely use useLayoutEffect within SSR environments.
• useScript - Hook to append a script into the page, preventing the same script to be included more than once.

Development

You can create a new hook by running npm run create-hook hookName which will bootstrap the files for you. You might want to run npm run create-hook without any options if you want to see all possible inputs.