Custom React/TypeScript Hooks

This repository contains a collection of custom React/TypeScript hooks designed to solve common problems encountered during React/TypeScript development. These hooks are reusable pieces of logic that encapsulate common patterns, making it easier to share functionality across components.

Hooks Included

useArray

Provides utilities for managing arrays in React state.

useMediaQuery

Easily detect changes in the viewport size and tracking changes to a media query.

useTimeout

Enables you to create and manage timeouts in React components.

useDebounce

Delaying the execution of a callback function.

useToggle

Simplifies the management of boolean state toggles.

useStorage

Allows you to store and retrieve stateful values in the browser's local storage or session storage.

useInput

Manages the state of an input field, including validation and focus tracking.

useAPI

Simplifies making API calls using the Fetch API, managing loading state and error handling.

useAsync

Generic hook for managing asynchronous operations, including loading state, error handling, and value retrieval.

useAsyncAPI

Handles asynchronous API calls using Axios, managing loading state, error handling, and data retrieval.

useWindowSize

Tracks browser window size changes, providing updates when the dimensions change.

useCount

Manages count state with increment, decrement, and reset functionalities.

useOnScreen

Detects element visibility on the screen using the Intersection Observer API.

useFetch

Facilitates making fetch requests with customizable options, handling loading state, error handling, and data retrieval.

useClickOutside

Calls a function when clicked outside the specified element.

useClickInside

Calls a function when clicked inside the specified element.

useHover

Tracks whether the specified element is hovered or not

useMouseEnter

Calls a function when mouse enters the specified element.

useMouseLeave

Calls a function when mouse leaves the specified element.

useIdle

Tracks the duration in milliseconds after which the user is considered idle

useNetworkStatus

Monitors the network status of the user's device

useClipboard

Copying text to the clipboard

useScrollPosition

Tracks the scroll position of the window or a specified element

useKeyPress

Detects key presses within current tab

useCountDownTimer

Provides functionality for a countdown timer.

useInterval

Invokes a function when a specified interval ends.

useLongPressDetection

Detects Long key presses of specific elements

useTimer

Provides functionality for a timer.

usePrevious

Provides previous value of a specified state

Usage

function MyComponent() {
  // Example usage of useArray
  const { array, set, push, remove, filter, update, clear } = useArray<number>([1, 2, 3, 4, 5, 6]);
  const { array, set, push, remove, filter, update, clear } = useArray<string>(['Hello']);

  // Example usage of useDebounce
  const [inputValue, setInputValue] = useState<string>(''); // State to hold input value
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };
  // Use the useDebounce hook to debounce the callback function
  const debouncedInputChange = useDebounce(handleInputChange, 500); // Debounce for 500 milliseconds

  // Example usage of useMediaQuery
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
  const isLargeScreen = useMediaQuery('(min-width: 1024px)');

  // Example usage of useTimeout
  const [isVisible, setIsVisible] = useState<boolean>(false);
  const [resetVisibility, clear] = useTimeout(() => setIsVisible(false), 3000);

  // Example usage of useToggle
  const [isOn, toggle] = useToggle(false);

  // Example usage of useStorage
  const [storedValue, setStoredValue, removeStoredValue] = useLocalStorage<string>(key1, initialValue);

  // Example usage of useInput
  const {
    value: inputValue,
    focus: inputFocus,
    onChange: handleInputChange,
    onBlur: handleInputBlur,
    onFocus: handleInputFocus,
    hasError: inputHasError,
  } = useInput((value: string) => value.trim() !== '');

  // Example usage of useAsync
  const asyncTask = async () => {
    // Simulating an asynchronous task
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('Async data');
      }, 1000);
    });
  };
  const { loading: asyncLoading, error: asyncError, value: asyncData } = useAsync(asyncTask, []);

  // Example usage of useAsyncAPI
  const apiUrl = 'https://api.example.com/data'; // Replace with your API URL
  const { data: asyncAPIData, isLoading: asyncAPILoading, error: asyncAPIError } = useAsyncAPI(apiUrl);

  // Example usage of useWindowSize
  const { width: windowWidth, height: windowHeight } = useWindowSize();

  // Example usage of useAPI
  const apiURL = 'https://api.example.com/data'; // Replace with your API URL
  const { data: apiData, isLoading: apiLoading, error: apiError } = useAPI(apiURL);

  // Example usage of useCount
  const { count, increment, decrement, reset } = useCount();

  // Example usage of useOnScreen
  const ref = React.useRef<HTMLDivElement>(null);
  const isOnScreen = useOnScreen(ref);

  // Example usage of useFetch
  const apiURL = 'https://api.example.com/data'; // Replace with your API URL
  const { data, isLoading, error } = useFetch(apiURL);

  // Example usage of useClickOutside
  useClickOutside(containerRef, handleClickOutside);

  // Example usage of useClickInside
  useClickInside(containerRef, handleClickInside);

  // Example usage of useHover
  const isHovered = useHover(containerRef);

  // Example usage of useMouseEnter
  useMouseEnter(containerRef, handleMouseEnter);

  // Example usage of useMouseLeave
  useMouseLeave(containerRef, handleMouseLeave);

  // Example usage of useIdle
  const isIdle = useIdle(20000);

  // Example usage of useNetworkStatus
  const isOnline = useNetworkStatus()

  // Example usage of useClipboard
  const [copyToClipboard, isCopied] = useClipboard();

  // Example usage of useScrollPosition
  const scrollPosition = useScrollPosition(); // Object
  const {x, y} = useScrollPosition() // Object Destructuring

  // Example usage of useKeyPress
  const isKeyPressed = useKeyPress();

  // Example usage of useCountDownTimer
  const { seconds, isRunning, startTimer, resetTimer, pauseTimer } = useCountdownTimer(StartSeconds);

  // Example usage of useInterval
  useInterval(callback, delay)

  // Example usage of use useLongPressDetection
  const isLongPressed = useLongPressDetection(YourREF, YourDuration)

  // Example usage of useTimer
  const { seconds, isRunning, startTimer, resetTimer, pauseTimer } = useTimer();

  // Example usage of usePrevious
  const prevState = usePrevious(state);

  return (
    // Your component JSX here...
  );
}

export default MyComponent;

For detailed usage instructions and examples for each hook,
please refer to the documentation provided in the respective hook's source file.

Contributing

Contributions to this repository are welcome!
If you have ideas for new custom hooks or improvements to existing ones,
feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.