@anton.bobrov/react-hooks NPM

`@anton.bobrov/react-hooks`

A collection of custom React hooks and utility functions designed to simplify component logic and enhance performance. This library provides a robust set of hooks with full TypeScript support, offering solutions for common patterns in modern React applications.

Installation

To install the package, use npm:

npm i "@anton.bobrov/react-hooks"

Usage

Here's an example of how to use one of the hooks, useDebouncedEffect, in your component:

import { useDebouncedEffect } from '@anton.bobrov/react-hooks';
import React, { useState } from 'react';

export const MyComponent = () => {
  const [value, setValue] = useState('');

  useDebouncedEffect(
    () => {
      console.log('Debounced effect executed with value:', value);
    },
    [value],
    300, // Debounce delay in milliseconds
  );

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
};

Available Hooks

Here are the available hooks and what they do:

useChange: Tracks changes to a property.
useClientHeight: Retrieves and tracks the client height of an element.
useClientSize: Retrieves and tracks the client width and height of an element.
useClientWidth: Retrieves and tracks the client width of an element.
useDebouncedEffect: Runs an effect after a specified debounce delay.
useDebouncedEvent: Debounces a callback.
useDebouncedProp: Debounces updates to a prop value.
useDomId: Generates a unique DOM element ID.
useDOMRect: Tracks the size and position of an element.
useEvent: Create a stable link for a callback function.
useEventListener: Adds event listeners to DOM elements.
useFocus: Detects focus state of an element.
useFocusIn: Detects focus inside a given element.
useFocusTrap: Traps focus within a specific container.
useForwardedRef: Forwards refs in components.
useHover: Detects hover state on an element.
useIntersectionObserver: Uses the IntersectionObserver API to track visibility of elements.
useInViewport: Detects when an element enters or leaves the viewport.
useIsOnceMounted: Returns true if the component has been mounted once.
useLazyReady: Tracks element visibility with lazy loading behavior.
useLiteInteraction: Detect a slight user interaction with elements.
useLocalStorage: A hook to work with the localStorage API.
useMouseClientPosition: Tracks the mouse position relative to the client window.
useOffsetHeight: Retrieves and tracks the offset height of an element.
useOffsetSize: Tracks the offset size of an element.
useOffsetWidth: Retrieves and tracks the offset width of an element.
useOnceProp: Updates the state only once when the current value matches the target value.
useOnElementResize: Listens for resize events on a specific element.
useOnEscape: Executes a callback when the Escape key is pressed.
useOutsideClick: Detects clicks outside a specific element.
usePointerHover: Detects hover state using pointer events.
usePreventDocumentScrolling: Temporarily prevents document scrolling.
usePrevious: Tracks the previous value of a variable.
usePropState: Creates a state that automatically synchronizes with an external value.
useScrollLock: Locks the scroll behavior of an element.

Available Utilities

In addition to hooks, the package also provides several utility functions:

objectKeys: Retrieves the keys of an object as an array of the object's keys.
pickObjectProps: Pick specific properties from an object.
times: Repeats a function n times and returns an array of the results.
splitIntoChunks: Splits an array into chunks.
uniqueArray: Returns an array with unique values.
addEventListener: Adds an event listener to a target.
getSiblingsFocusableElements: Retrieves focusable sibling elements.
resetFocus: Resets focus to a specific element.
selectFocusableChildren: Selects focusable children within an element.
isBrowser: Checks if the code is running in a browser environment.
isServer: Checks if the code is running in a server environment.
getRandomInt: Generates a random integer.
cleanTelephone: Cleans telephone strings.
removeDuplicateSlashes: Removes duplicate slashes from a URL or path.
isBoolean: Checks if a value is a boolean.
isNumber: Checks if a value is a number.
isString: Checks if a value is a string.
isUndefined: Checks if a value is undefined.