Web kit frontend library of hooks for web environmental

How to use it

Install package from npm:

npm i @appello/web-kit

Import modules you need in your code:

import { useClickAway, useIntersectionObserver } from '@appello/web-kit';

Development guide

For developers

Each new functionality must be added to the folder and exported from the root! This is necessary to simplify the import of the necessary functionality:

import { useClickAway, useIntersectionObserver, ... } from '@appello/web-kit';

If you need to create a new module, remember to add index.ts with exports.

Hooks

| Hook Name | Description | Hook Documentation | | ------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | | useBlobObjectUrl | Converting a Blob object to base64 encoded text | 📖 useBlobObjectUrl | | useClickAway | Hook for handling when user clicks outside element | 📖 useClickAway | | useCopyToClipboard | Hook for copying text to clipboard | 📖 useCopyToClipboard | | useDebounce | Debounces a value, delaying updates until after a specified delay | 📖 useDebounce | | useElementSize | Hook for getting element size using ResizeObserver | 📖 useElementSize | | useEventListener | Hook for handling DOM events with cleanup | 📖 useEventListener | | useGeolocation | Hook for handling geolocation API | 📖 useGeolocation | | useIdle | Hook to check user activity and idle state | 📖 useIdle | | useInfiniteScroll | Hook for implementing infinite scroll functionality | 📖 useInfiniteScroll | | useIntersectionObserver | Hook for working with IntersectionObserver API | 📖 useIntersectionObserver | | useMedia | Hook for tracking CSS media query matches | 📖 useMedia | | useNetwork | Hook for monitoring network connection status and quality | 📖 useNetwork | | useScrollLock | Hook for locking/unlocking document or element scrolling | 📖 useScrollLock | | useWindowSize | Hook for tracking window dimensions with optional debouncing | 📖 useWindowSize |

Utils

| Util Name | Description | Util Documentation | | ------------ | -------------------------------------------------------------------- | --------------------------------------------------- | | getElement | Utility for resolving element targets (refs, functions, or elements) | 📖 getElement |