Custom React Hooks

The following are examples of custom React hooks created by "@poriyaalar/custom-hooks" library. Below is the explanation of each hook with its respective code.

Installation

npm install @poriyaalar/custom-hooks

or

npm i @poriyaalar/custom-hooks

Usage

1. useEventListener(event,handler,ref)

| Parameter | Mandatory | Type | Description | | :-------: | :-------: | :------: | :--------------------------------------------------------: | | event | Yes | event | Require the Event name as String Type | | handler | Yes | Function | Callback Function receive the event | | ref | Optional | ref | Optional, Require the reference of the HTML or JSX Element |

This hook attaches an event listener to a specified element using a ref. When the event occurs on the element, the specified handler function is executed.

returns the event from the given Element.

Example:

import { useEventListener } from "@poriyaalar/custom-hooks";
function App() {
 const divRef = useRef();
 const listener = (e) => console.log(e);
 useEventListener("click", listener, divRef);
 return <div ref={divRef}/>
}

2.useElementSize(ref)

This hook returns the size of a specified element using a ref.

| Parameter | Mandatory | Type | Description | | :-------: | :-------: | :--: | :----------------------------------------------: | | ref | Yes | ref | Require the reference of the HTML or JSX Element |

Example:

import { useElementSize } from "@poriyaalar/custom-hooks";
function App() {
 const divRef = useRef();
 const size= useElementSize(divRef);
 console.log(size);
  return <div ref={divRef}/>
}

3. useCurrentPath()

This hook returns the current URL path. Its worked only for App.js Wrapped by **Browser Router **or Hash Router if not install react-router-dom

Example:

import { useCurrentPath } from "@poriyaalar/custom-hooks";
function App() {
 const path= useCurrentPath();
 console.log(path);
}

4. useInterval(callback,delay,stop)

This hook repeatedly calls a function with a specified delay.and optional stop function return boolean

| Parameter | Mandatory | Type | Description | | :-------: | :-------: | :----------: | :-----------------------------------------------------------------------: | | callback | Yes | Function | Require the Function to be Execute on Every Interval | | delay | Yes | Milliseconds | set the interval delay for execute Function again | | stop | Optional | Function | Optional, Require the Callback Function ,it require to return the boolean |

no return value : void,

Example:

import { useInterval } from "@poriyaalar/custom-hooks";
function App() {
  useInterval(() => {
    console.log("check Interval");
  }, 3000,() => true);
}

5. useLocalStorage(key,defaultValue)

| Parameter | Mandatory | Type | Description | | :----------: | :-------: | :----: | :---------------------------------------------------------------------------------------------------------------: | | key | Yes | String | Required any Value for name or id of the Data | | defaultValue | Yes | any | Required any String or Array or Object or Array of Objects to store in the browser Local storage, JSX not allowed |

This hook allows you to store and retrieve data from the browser's localStorage API. It takes a key and an initial value as parameters and returns an array containing the current value and a setter function.

returns the data in the browser's Local storage.

Example:

import { useLocalStorage } from "@poriyaalar/custom-hooks";
function App() {
const [value, setValue] = useLocalStorage("data", { name: "Test" });

const setToLocalStorage = () => {
 setValue({ name: "Poriyaalar" });
};
setToLocalStorage();
}

6. useLocalStorageValue(key)

| Parameter | Mandatory | Type | Description | | :-------: | :-------: | :----: | :-------------------------------------------: | | key | Yes | String | Required any Value for name or id of the Data |

This hook provides a way to get the data in the browser's local storage. It returns stored values.

Example:

import { useLocalStorageValue } from "@poriyaalar/custom-hooks";
function App() {
const value = useLocalStorageValue("data");
console.log(value)
}

7. useSetLocalStorage(key,defaultValue)

| Parameter | Mandatory | Type | Description | | :----------: | :-------: | :----: | :---------------------------------------------------------------------------------------------------------------: | | key | Yes | String | Required any Value for name or id of the Data | | defaultValue | Yes | any | Required any String or Array or Object or Array of Objects to store in the browser Local storage, JSX not allowed |

This hook provides a way to store data in the browser's local storage. Its not returns any array values: the current value stored in window storage and a function to set a new value.

no return value : void

Example:

import { useSetLocalStorage } from "@poriyaalar/custom-hooks";
function App() {
const [setValue] = useSetLocalStorage("data", { name: "Test" });

const setToLocalStorage = () => {
 setValue({ name: "Poriyaalar" });
};
setToLocalStorage();
}

8. useGlobalStorage(key,defaultValue)

| Parameter | Mandatory | Type | Description | | :----------: | :-------: | :----: | :----------------------------------------------------------------------------------------------------------------: | | key | Yes | String | Required any Value for name or id of the Data | | defaultValue | Yes | any | Required any String or Array or Object or Array of Objects to store in the browser Window storage, JSX not allowed |

This hook provides a way to store data and get the data in the browser's window storage. It returns an array with two values: the current value stored in window storage and a function to set a new value.

Example:

import { useGlobalStorage } from "@poriyaalar/custom-hooks";
function App() {
const [value, setValue] = useGlobalStorage("data", { name: "Test" });

const setToGlobalStorage = () => {
 setValue({ name: "Poriyaalar" });
};
setToGlobalStorage();
}

9. useGlobalStorageValue(key)

| Parameter | Mandatory | Type | Description | | :-------: | :-------: | :----: | :-------------------------------------------: | | key | Yes | String | Required any Value for name or id of the Data |

This hook provides a way to get the data in the browser's window storage. It returns stored values.

Example:

import { useGlobalStorageValue } from "@poriyaalar/custom-hooks";
function App() {
const value = useGlobalStorageValue("data");
console.log(value)
}

10. useSetGlobalStorage(key,defaultValue)

| Parameter | Mandatory | Type | Description | | :----------: | :-------: | :----: | :----------------------------------------------------------------------------------------------------------------: | | key | Yes | String | Required any Value for name or id of the Data | | defaultValue | Yes | any | Required any String or Array or Object or Array of Objects to store in the browser Window storage, JSX not allowed |

This hook provides a way to store data in the browser's window storage. Its not returns any array values: the current value stored in window storage and a function to set a new value.

no return value : void

Example:

import { useSetGlobalStorage } from "@poriyaalar/custom-hooks";
function App() {
const [setValue] = useSetGlobalStorage("data", { name: "Test" });

const setToGlobalStorage = () => {
 setValue({ name: "Poriyaalar" });
};
setToGlobalStorage();
}

11. useMediaQuery(mediaQuery)

| Parameter | Mandatory | Type | Description | | :--------: | :-------: | :----: | :----------------------------------: | | mediaQuery | Yes | string | Require the String Contain the query |

This hook which listens for a media query and updates the state when the query is true/false

returns the boolean value true or false.

Example:

import { useMediaQuery } from "@poriyaalar/custom-hooks";
function App() {
 const isMobileMin = useMediaQuery("(min-width:320px)");
}

12. useResponsive()

This hook which listens for a media query and updates the state when the query is true/false

returns the object contains the device type with the value of boolean.

Example:

import { useResponsive } from "@poriyaalar/custom-hooks";
function App() {
 const deviceType = useResponsive();
}