@julianfere/react-utility-hooks NPM

About The Project

This project is a collection of React Hooks that I have found useful in my own projects. I hope you find them useful as well!. The idea is to build a library of hooks that are easy to use, type safe, and functional.

Getting Started

Installation

npm i @julianfere/react-utility-hooks

useAsync

import React from "react";
import { useAsync } from "@julianfere/react-utility-hooks";

  const fetchData = async () => {
    // Your asynchronous operation here
    // e.g., fetching data from an API
  };

  const BasicExampleAutomatic = () => {
    const { state } = useAsync(() => fetchData());

    return (
      <>
        {state === "pending" && <p>Loading...</p> }
        {state === "fulfilled" && <p>Data loaded successfully!</p>}
        {state === "rejected" && <p>Error loading data.</p>}
      </>
    );
  };

const CompleteExampleManua = () => {
  const [data, setData] = useState(null);

  const { run, state } = useAsync(() => fetchData(), {
    manual: true,
    onSuccess: (data) => setData(data),
    onError: (error) => console.log(error),
  });

  return (
    <>
      {state === "pending" && <p>Loading...</p> }
      {state === "fulfilled" && <p>Data loaded successfully!</p>}
      {state === "rejected" && <p>Error loading data.</p>}
      <button onClick={run}>Fetch Data</button>
    </>
  )
}

const { run, state } = useAsync(() => asyncFunction(), options);

asyncFunction: The asynchronous function that will be executed. options: (Optional) Configuration options for the useAsync hook.

Options:

manual (default: false): If set to true, the asynchronous function won't run automatically on component mount. You must call run manually. Otherwise, the asynchronous function will run automatically on component mount. onSuccess: A callback function that will be executed when the asynchronous function resolves successfully. onError: A callback function that will be executed when the asynchronous function encounters an error. cancelable: (default: true) If set to false, the asynchronous function will not be cancelable. If set to true, the asynchronous function will be cancelable. This means that if the component unmounts before the asynchronous function resolves, the asynchronous function will be canceled.

Returned Values: run: A function that triggers the execution of the asynchronous function. If manual is set to true, this function will throw an error, reminding you to set manual to true. state: A string representing the current state of the asynchronous operation. Possible values are idle, pending, fulfilled, or rejected.

useDebounce

import { useDebounce } from "@hooks";

const BasicExample = () => { const value, setValue = useState(""); const debouncedValue = useDebounce(value, 500);

useEffect(() => { makeApiCall(debouncedValue); }, debouncedValue);

return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />

  <p>Debounced value: {debouncedValue}</p>
</>

); };

<h4>API</h4>

```typescript

const debouncedValue = useDebounce(value, delay);

value: The value to be debounced. delay: The delay in milliseconds to wait before updating the debounced value. Defaults to 500ms.

useThrottle

import { useThrottle } from "@hooks";

const BasicExample = () => { const value, setValue = useState(""); const throttledValue = useThrottle(value, 500);

useEffect(() => { makeApiCall(throttledValue); }, throttledValue);

return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />

  <p>Throttled value: {throttledValue}</p>
</>

); };

<h4>API</h4>

```typescript

const throttledValue = useThrottle(value, delay);

value: The value to be throttled. delay: The delay in milliseconds to wait before updating the throttled value. Defaults to 500ms.

useLocalStorage

type UseLocalStorageType = { name: string; age: number; }

const BasicExample = () => { const { getItem, setItem, removeItem, hasItem, clear } = useLocalStorage(); const key, setKey = useState(""); const value, setValue = useState("");

return (
  <>
    <input onChange={(e) => setKey(e.value)} />
    <input onChange={(e) => setValue(e.value)} />
    <p>{key} is {getItem(key)}</p>
    <button onClick={() => setItem(key, value)}>Set Item</button>
    <button onClick={() => removeItem(key)}>Remove Item</button>
    <button onClick={() => clear()}>Clear</button>
  </input>
);

};

  <h4>API</h4>

```typescript
const { getItem, setItem, removeItem, hasItem, clear } = useLocalStorage<T>();

T: The type of the value to be stored in local storage.

Returned Values: getItem: A function that retrieves the value associated with the specified key from local storage. setItem: A function that stores the specified value in local storage, associated with the specified key. removeItem: A function that removes the specified key and its associated value from local storage. hasItem: A function that returns true if the specified key exists in local storage, and false otherwise. clear: A function that removes all keys and their associated values from local storage.

useDelay

const BasicExample = () => { const value, setValue = useState("");

const updateValue = (val: string)=> {
  setValue(val);
}

useDelay(() => updateValue("Delayed value"));

const runDelay = useDelay(() => updateValue("Manual value"), {manual: true, delay: 1000});

import React, { useState } from "react";

import { useDebounce } from "@hooks";

const BasicExample = () => { const value, setValue = useState(""); const debouncedValue = useDebounce(value, 500);

useEffect(() => { makeApiCall(debouncedValue); }, debouncedValue);

return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />

  <p>Debounced value: {debouncedValue}</p>
</>

); };

<h4>API</h4>

```typescript

const debouncedValue = useDebounce(value, delay);

value: The value to be debounced. delay: The delay in milliseconds to wait before updating the debounced value. Defaults to 500ms.

useThrottle

import { useThrottle } from "@hooks";

const BasicExample = () => { const value, setValue = useState(""); const throttledValue = useThrottle(value, 500);

useEffect(() => { makeApiCall(throttledValue); }, throttledValue);

return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />

  <p>Throttled value: {throttledValue}</p>
</>

); };

<h4>API</h4>

```typescript

const throttledValue = useThrottle(value, delay);

value: The value to be throttled. delay: The delay in milliseconds to wait before updating the throttled value. Defaults to 500ms.

useLocalStorage

type UseLocalStorageType = { name: string; age: number; }

const BasicExample = () => { const { getItem, setItem, removeItem, hasItem, clear } = useLocalStorage(); const key, setKey = useState(""); const value, setValue = useState("");

return (
  <>
    <input onChange={(e) => setKey(e.value)} />
    <input onChange={(e) => setValue(e.value)} />
    <p>{key} is {getItem(key)}</p>
    <button onClick={() => setItem(key, value)}>Set Item</button>
    <button onClick={() => removeItem(key)}>Remove Item</button>
    <button onClick={() => clear()}>Clear</button>
  </input>
);

};

  <h4>API</h4>

```typescript
const { getItem, setItem, removeItem, hasItem, clear } = useLocalStorage<T>();

T: The type of the value to be stored in local storage.

useDelay

const BasicExample = () => { const value, setValue = useState("");

const updateValue = (val: string)=> {
  setValue(val);
}

useDelay(() => updateValue("Delayed value"));

const runDelay = useDelay(() => updateValue("Manual value"), {manual: true, delay: 1000});

return (
  <>
    <button onClick={runDelay}>Run manual delay</button>
    <p>Delayed value: {delayedValue}</p>
  </>
);

};

  <h4>API</h4>

```typescript
const delayedValue = useDelay(callback, options);

callback: The function to be delayed. options: (Optional) Configuration options for the useDelay hook.

manual (default: false): If set to true, the delayed function won't run automatically on component mount. You must call run manually. Otherwise, the delayed function will run automatically on component mount.
delay: The delay in milliseconds to wait before running the delayed function. Defaults to 250ms.

Returned Values:

run: A function that triggers the execution of the delayed function. If manual is set to true, this function will throw an error, reminding you to set manual to true.

useDocumentTitle

const BasicExample = () => { useDocumentTitle("New Title");

return (
  <>
    <p>Document title has been updated to "New Title"</p>
  </>
);

};

  <h4>API</h4>

```typescript
useDocumentTitle(title, persistOnUnmount);

title: The new title for the document. persistOnUnmount: (Optional) If set to true, the document title will persist after the component unmounts. Defaults to false.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!