React Custom Hooks

This library contains a collection of reusable React custom hooks to simplify state management, side effects, and user interactions.

Installation

To use these hooks in your React project, install the react-custom-hooks-utils package via npm or yarn:

Using npm

npm install react-custom-hooks-utils

Using yarn

yarn add react-custom-hooks-utils

Usage

Once installed, you can import and use the hooks in your React components. Below is a detailed explanation of how to use each hook:

1. Fetch Data from an API (useFetch)

import { useFetch } from 'react-custom-hooks-utils';

const { data, loading, error } = useFetch('https://api.example.com/data');

• data: Stores the API response.
• loading: Boolean indicating if the request is in progress.
• error: Captures any error that occurs during the fetch.

2. Persist State in Local Storage (useLocalStorage)

import { useLocalStorage } from 'react-custom-hooks-utils';

const [name, setName] = useLocalStorage('name', 'John Doe');

• Retrieves and stores values in localStorage.
• Automatically updates when values change.

3. Toggle Boolean State (useToggle)

import { useToggle } from 'react-custom-hooks-utils';

const [isVisible, toggleVisibility] = useToggle(false);

• Allows toggling between true and false states.

4. Debounce a Value (useDebounce)

import { useDebounce } from 'react-custom-hooks-utils';

const debouncedSearchTerm = useDebounce(searchTerm, 500);

• Delays updating the state until after a specified time (500ms).
• Useful for optimizing API requests when users type in a search bar.

5. Get Window Dimensions (useWindowSize)

import { useWindowSize } from 'react-custom-hooks-utils';

const { width, height } = useWindowSize();

• Provides real-time updates of the window size (width and height).

6. Get Previous State (usePrevious)

import { usePrevious } from 'react-custom-hooks-utils';

const previousCount = usePrevious(count);

• Stores the previous state value.
• Useful for tracking state changes over time.

7. Detect Clicks Outside an Element (useClickOutside)

import { useClickOutside } from 'react-custom-hooks-utils';
import { useRef } from 'react';

const ref = useRef();
useClickOutside(ref, () => console.log('Clicked outside!'));

• Detects clicks outside a referenced element.
• Useful for closing dropdowns, modals, or sidebars when clicking outside.

8. Detect Hover State (useHover)

import { useHover } from 'react-custom-hooks-utils';

const [hoverRef, isHovered] = useHover();

• hoverRef: Attach this to an element.
• isHovered: Boolean indicating if the element is being hovered.

9. Execute Code After Delay (useTimeout)

import { useTimeout } from 'react-custom-hooks-utils';

useTimeout(() => console.log('Timeout!'), 1000);

• Runs a callback function after a specified delay (1000ms).

10. Render Lists Easily (Each)

import { Each } from 'react-custom-hooks-utils';

const data = ['Item 1', 'Item 2', 'Item 3'];

<Each of={data} render={(item, index) => <p key={index}>{item}</p>} />

• Simplifies rendering lists.
• Ensures correct key assignment and child element handling.

11. Manage Form State (useForm)

import { useForm } from 'react-custom-hooks-utils';

const { values, errors, handleChange, handleSubmit } = useForm(
  { email: '', password: '' },
  (values) => {
    const errors = {};
    if (!values.email) errors.email = 'Email is required';
    if (!values.password) errors.password = 'Password is required';
    return errors;
  }
);

• values: Stores form field values.
• errors: Stores validation errors.
• handleChange: Updates state on input change.
• handleSubmit: Validates and submits form data.

12. Access and Track Geolocation (useGeoLocation)

import { useGeoLocation } from 'react-custom-hooks-utils';

const LocationComponent = () => {
  // Call the hook with options (optional) and watch set to true
  const { loading, coordinates, error, isWatching } = useGeoLocation(
    { enableHighAccuracy: true, timeout: 5000 }, // Optional options
    true // Set to true if you want to watch for location changes
  );

  if (loading) {
    return <div>Loading location...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h3>Geolocation</h3>
      <p>Latitude: {coordinates?.latitude}</p>
      <p>Longitude: {coordinates?.longitude}</p>
      <p>Watching: {isWatching ? 'Yes' : 'No'}</p>
    </div>
  );
};

• loading: Whether the location is still being fetched.
• coordinates: The current coordinates (if available).
• error: An error object if the location request fails.
• isWatching: Whether the hook is currently watching for location changes.

13. Update Document Title (useDocumentTitle)

import {useDocumentTitle} from 'react-custom-hooks-utils';

const PageComponent = () => {
  useDocumentTitle('My Page Title', true); // Set the title and revert on unmount

  return <div>Content of the page</div>;
};

• title: The title you want to set for the document.
• revertOnUnmount: If true, the document title will revert to its previous value when the component unmounts.

14. useCookie

Description:

A hook to manage browser cookies with React state.

Usage:

import { useCookie } from 'react-custom-hooks-utils';

const [cookie, setCookie] = useCookie('theme', 'light');

Parameters:

• key (string) – The name of the cookie.
• initialValue (any) – The default value if the cookie is not set.

Returns:

• cookie – The current cookie value.
• setCookie(value, daysToExpire) – Function to update the cookie value and set an expiration.

15. useDarkMode

Description:

A hook to manage dark mode preferences using localStorage and system settings.

Usage:

import { useDarkMode } from 'react-custom-hooks-utils';

const [isDarkMode, toggleDarkMode] = useDarkMode();

Returns:

• isDarkMode – Boolean indicating if dark mode is enabled.
• toggleDarkMode – Function to toggle dark mode.

16. useInterval

Description:

A hook to run a function at a set interval.

Usage:

import { useInterval } from 'react-custom-hooks-utils';

useInterval(() => {
  console.log('This runs every second');
}, 1000);

Parameters:

• callback – Function to execute.
• delay – Interval duration in milliseconds.

17. useKeyPress

Description:

A hook to detect if a specific key is being pressed.

Usage:

import { useKeyPress } from 'react-custom-hooks-utils';

const isEnterPressed = useKeyPress('Enter');

Parameters:

• targetKey (string) – The key to listen for.

Returns:

• keyPressed – Boolean indicating if the key is pressed.

18. useMediaQuery

Description:

A hook to check if the current screen size matches a given media query.

Usage:

import { useMediaQuery } from 'react-custom-hooks-utils';

const isMobile = useMediaQuery('(max-width: 768px)');

Parameters:

• query (string) – CSS media query string.

Returns:

• matches – Boolean indicating if the query matches.

19. useThrottle

Description:

A hook to throttle a function call, ensuring it executes at most once within a given time frame.

Usage:

import { useThrottle } from 'react-custom-hooks-utils';

const throttledFunction = useThrottle(() => console.log('Throttled'), 2000);

Parameters:

• callback – Function to be throttled.
• delay – Time in milliseconds to wait before the function can be executed again.

Returns:

• A throttled version of the callback function.

License

This project is open-source and available under the MIT License.