1.2.3 • Published 2 years ago
@10up/react-hooks v1.2.3
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 leveragingmatchMedia
.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 foraddEventListener
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 tracksrouteChange
events from Next's Router.useKey
- A convenient wrapper arounduseEvent
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 useuseLayoutEffect
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.
1.2.0
2 years ago
1.1.0
2 years ago
1.0.1-alpha.8
2 years ago
1.0.1-alpha.7
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.0.1-alpha.6
2 years ago
1.0.1-alpha.5
2 years ago
1.0.1-alpha.4
2 years ago
1.2.1-next.0
2 years ago
1.0.1-alpha.3
2 years ago
1.0.1-alpha.2
2 years ago
1.0.1-alpha.1
2 years ago
1.0.1-alpha.0
2 years ago
1.0.0
2 years ago