@appello/web-kit

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