Anzol provides very useful client-side React hooks for very common tasks such as data fetching or deferring the updating of values with a custom timeout. It supports both SSG and SSR. You can find working examples in the documentation or, if you just want the code, in the examples/components directory.

Features:

• ✅ Fully Tested
• ✅ SSR and SSG compatible
• ✅ Detailed documentation

Installation

Anzol is available on the NPM registry. To install it, just run:

npm install anzol

Currently Available Hooks

• ✅ useFetch: Fetches the provided URL and optionally parses the response. Aborts requests when a new request is started before the previous has finished to prevent flickering of stale responses by default.
• ✅ useDefer: Delays the update of a value until the input has stopped changing for a certain time. This is different from React's built-in useDeferredValue because you can set the delay yourself.
• ✅ useHasMounted: Tells you if your component has already mounted. Useful for avoid hydration errors.
• ✅ useToggle: Provides a boolean toggle that does not persist between page reloads.
• ✅ useIntersectionObserver: Provides a hook API that wraps the IntersectionObserver API. This hook is for use with a single element only. For simplicity this is the recommended approach. If you have an extremely large number of objects to observe and want to avoid creating an IntersectionObserver for each, refer to useIntersectionObserverArray to use a single observer for multiple elements with a common root.
• ✅ useIntersectionObserverArray: Like useIntersectionObserver but for multiple elements.
• ✅ useEvent: Provides a wrapper around the EventListener API. Use the return value to define the event target.
• ✅ useLazyLoad: Provides a simple API for fetching data from a resource in batches.
• ✅ useLocalStorage: Provides access to local storage, with the additional option to update all usages of this hook when local storage changes.
• ✅ useClickOutside: Provides a ref to attach to an HTML element and takes a callback function, and calls that function when the user clicks anywhere outside the given element.
• ✅ usePreferredScheme: Listens for changes in the user's preferred scheme and returns it.
• ✅ useCooldownState: Like useState but allows passing a cooldown period during which state updates are discarded.