@coderebus/react-hooks

React Hooks Starter Package

Table of Contents

1. useFetch()
2. useLocalStorage()
3. useSessionStorage()
4. useIntersectionObserver()
5. useDebounce()
6. useThrottle()
7. useLocalizedContent()

useFetch()

useFetch hook should be used ideally for 'GET', 'POST', 'PUT', 'PATCH' and 'DELETE' methods.

Usage

1. Import the hook

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

2. Fetch calls

   a. GET method

   const options = {
     method: "GET",
   };
   
   const { data, error, loading } = useFetch(url, options);

   • 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

   b. POST (and other mutation methods)

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

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

3. Default options object

   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
   };

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

useLocalStorage()

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

• It takes two arguments
• The first argument is the key to be used to store the data in the local storage
• The second argument is the initial value to be set in the local storage
• The second argument is optional, if not provided, the initial value will be set to null
• 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

1. Import the hook

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

2. Sample

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.

• It takes two arguments
• The first argument is the key to be used to store the data in the session storage
• The second argument is the initial value to be set in the session storage
• The second argument is optional, if not provided, the initial value will be set to null
• 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

1. Import the hook

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

2. Sample

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	Default	Description
root	No	null	The element that is used as the viewport for checking target's intersection
rootMargin	No	'0px'	The margin around the root
threshold	No	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
once	No	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

1. Import the hook

import { useIntersectionObserver } from "@ra/react-hooks";

2. Sample

const [isIntersecting, targetRef] = useIntersectionObserver({
  rootMargin: "100px",
});

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