React Hooks

This package offers two powerful ways to enhance your React development experience:

1. Installable Package: Get instant access to a comprehensive library of custom react hooks. Simply install the package to incorporate advanced functionality into your react based applications with minimal effort.
2. CLI Tool: Generate a customizable shared react hooks package tailored to your specific needs within a monorepo setup. The CLI tool scaffolds everything you need, allowing you to maintain and scale your development with ease.

Badges from Shields

Table of Contents

• Installation
• Hooks
  • useFetch()
  • useLocalStorage()
  • useSessionStorage()
  • useIntersectionObserver()
  • useDebounce()
  • useThrottle()
  • useLocalizedContent()

Installation

#using npm
npm install @coderebus/react-hooks

#using yarn
yarn add @coderebus/react-hooks

#using pnpm
pnpm add @coderebus/react-hooks

useFetch()

useFetch hook is used to make fetch calls. It returns the data, error and loading states. It should be used ideally for 'GET', 'POST', 'PUT', 'PATCH' and 'DELETE' methods.

| Parameter | Required | Type | Default | Description | | --------- | -------- | -------- | -------------------------------------------------- | ------------------------------------------------ | | url | Yes | string | N.A | The url to be used for the fetch call | | options | No | object | Default Options refer | The options object to be used for the fetch call |

Usage

a. GET method

• If you want to use 'GET' method, then you do not have to provide the options object.
• If you are providing the options object, you do not have to explicitly provide the method property, as 'GET' is assumed by default.

import { useFetch } from "@coderebus/react-hooks/fetch";

const { data, error, loading } = useFetch(url);

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

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

return <div>{data}</div>;

b. POST (and other mutation methods)

If you want to use any method other than 'GET', then you have to provide the options object with the method and body properties.

const options = {
    method: 'POST' (required),
    body: {
        title: 'foo',
        body: 'bar',
    } (required)
    other similar fetchOptions...
}

const { data, error, loading } = useFetch(url, options)

Default options object

These are the default properties (options) that are used if you do not provide any options object or its properties.

const options = {
  method: "GET", // 'POST', 'PUT', 'PATCH'...
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "same-origin", // 'omit', 'include'
  mode: "cors", // 'no-cors', 'same-origin'
  cache: "default", // 'no-cache', 'reload', 'force-cache', 'only-if-cached'
  redirect: "follow", // 'manual', 'error'
  referrerPolicy: "no-referrer",
  refetch: 3, // number of times to refetch in case of error
  retryAfter: 1000, // time in milliseconds to wait before retrying
};

useLocalStorage()

useLocalStorage hook is used to store data in the browser's local storage.

| Parameter | Required | Type | Default | Description | | -------------- | -------- | -------- | ------- | ----------------------------------------------------------- | | key | Yes | string | N.A | The key to be used to store the data in the session storage | | initialValue | No | any | null | The initial value to be set in the local storage |

• The hook returns an array of two elements
• The first element is the value stored in the local storage
• The second element is a function to set the value in the local storage

Usage

import { useLocalStorage } from "@coderebus/react-hooks/storage";

const [value, setValue] = useLocalStorage < { name: string } > "name";

const handleSetValue = () => {
  setValue({ name: "Jane Doe" });
};

const handleRemoveValue = () => {
  setValue(null);
};

return (
  <div>
    <button onClick={handleSetValue}>Add Value</button>
    <button onClick={handleRemoveValue}>Delete Value</button>
  </div>
);

useSessionStorage()

useSessionStorage hook is used to store data in the browser's session storage.

| Parameter | Required | Type | Default | Description | | -------------- | -------- | -------- | ------- | ----------------------------------------------------------- | | key | Yes | string | N.A | The key to be used to store the data in the session storage | | initialValue | No | any | null | The initial value to be set in the session storage |

• The hook returns an array of two elements
• The first element is the value stored in the session storage
• The second element is a function to set the value in the session storage

Usage

import { useSessionStorage } from "@coderebus/react-hooks/storage";

const [tokenId, setTokenId] = useSessionStorage < { token: string } > "token";

const addTokenId = () => {
  setTokenId({ token: "jvV8VIjvhadV73WEVjh7VKHJ798ha" });
};

const removeTokenId = () => {
  setTokenId(null);
};

return (
  <div>
    <button onClick={addTokenId}>Add Token</button>
    <button onClick={removeTokenId}>Delete Token</button>
  </div>
);

useIntersectionObserver()

useIntersectionObserver hook is used to observe the intersection of a target element with the viewport.

| Parameter | Required | Type | Default | Description | | ------------------- | -------- | ---------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | elemRef | No | RefObject<Element> | useRef<HTMLDivElement>(null) | The ref of the target element | | root | No | Element | null | The element that is used as the viewport for checking target's intersection | | rootMargin | No | string | 0% | The margin around the root | | threshold | No | number or number[] | 0 | A number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed | | freezeOnceVisible | No | boolean | false | A boolean value indicating whether the observer should only run once or not |

• The hook returns an array of two elements
• The first element is the isIntersecting flag which is true when the target element is intersecting with the viewport
• The second element is the target element's ref

Usage

a. using default values

import { useIntersectionObserver } from "@coderebus/react-hooks/intersection";
const [isIntersecting, targetRef] = useIntersectionObserver(ref, {});

return (
  <div>
    <div ref={targetRef}>Target Element</div>
    <div>{isIntersecting ? "Intersecting" : "Not Intersecting"}</div>
  </div>
);

b. using custom values

import { useIntersectionObserver } from "@coderebus/react-hooks/intersection";
import { useRef } from "react";

const ref = (useRef < HTMLDivElement) | (null > null); // custom ref element
const [isIntersecting] = useIntersectionObserver(ref, {
  root: null,
  rootMargin: "10px",
  threshold: 0.5,
  freezeOnceVisible: true,
});

return (
  <div>
    <div ref={ref}>Target Element</div>
    <div>{isIntersecting ? "Intersecting" : "Not Intersecting"}</div>
  </div>
);

useDebounce()

useDebounce hook is used to delay the execution of a function until after a certain amount of time has elapsed since its last invocation. Refer here for a detailed explanation on debouncing.

| Parameter | Required | Type | Default | Description | | --------- | -------- | -------- | ------- | -------------------------------------------------------------- | | value | Yes | any | N.A | The value to be debounced | | delay | No | number | 500 | The time in milliseconds to wait before executing the function |

The hook returns the debounced value.

Usage

import { ChangeEvent, useState } from "react";
import { useDebounce } from "@coderebus/react-hooks/debounce";

const [searchTerm, setSearchTerm] = useState < string > "";
const debouncedSearch = useDebounce < string > (searchTerm, 500);

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  setSearchTerm(e.target.value);
};

return (
  <div>
    <input
      type='text'
      value={searchTerm}
      onChange={handleChange}
      placeholder='Search...'
    />
    <div>{debouncedValue}</div>
  </div>
);

useThrottle()

useThrottle hook is used to limit the number of times a function can be called in a given time period. Refer here for a detailed explanation on throttling.

| Parameter | Required | Type | Default | Description | | --------- | -------- | -------- | ------- | --------------------------------------------------- | | value | Yes | any | N.A | The value to be throttled | | delay | No | number | 500 | The time in milliseconds between the function calls |

The hook returns the throttled value.

Usage

import { useState, useEffect } from "react";
import { useThrottle } from "@coderebus/react-hooks/throttle";

const [scrollPosition, setScrollPosition] = useState(0);
const throttledValue = useThrottle(scrollPosition, 200);

const handleScroll = () => {
  setScrollPosition(window.scrollY);
};

useEffect(() => {
  window.addEventListener("scroll", handleScroll);
  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, [handleScroll]);

return (
  <div>
    <div>{throttledValue}</div>
    Scroll Position: {scrollPosition}
  </div>
);

useLocalizedContent()

useLocalizedContent hook is used to handle localized content retrieval, caching, and language management.

| Parameter | Required | Type | Default | Description | | -------------------- | -------- | -------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | url | Yes | string | N.A | The url to be used for the fetch call | | languageStorageKey | No | string | undefined | The key to be used to store the language in the local storage. If not provided, en_us is used as the default language. | | fetchOptions | No | object | Default Options refer | The options object to be used for the fetch call |

• The hook returns an array of three elements.
• The first element is the loading flag indicating whether the content is currently loading.
• The second element is the getLabel function that accepts a label name and returns the corresponding localized content.
• The third element is the getAllLabels function that returns all localized content for the given URL and language.

Usage

import { useLocalizedContent } from "@coderebus/react-hooks/localization";
import { useLocalStorage } from "@coderebus/react-hooks/storage";

const url = "/data"; // BASE_PATH
const [data, setData] = useLocalStorage("my-language-key", "es_es");
const [loading, getLabel, getAllLabels] = useLocalizedContent(
  url,
  "my-language-key"
);

const title = getLabel("title");
const description = getLabel("description");
const allLabels = getAllLabels();

const changeLanguage = (newLanguage) => {
  setData(newLanguage);
};

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

return (
  <div>
    <h1>{title}</h1>
    <p>{description}</p>
    <div>
      {Object.entries(allLabels).map(([key, value]) => (
        <p key={key}>{`${key}: ${value}`}</p>
      ))}
    </div>
    <button onClick={() => changeLanguage("en_us")}>Change to English</button>
  </div>
);