React Hooks

Overview

This package is a collection of custom React hooks that I frequently reuse in my applications. It aims to streamline the development process by encapsulating common functionalities into reusable hooks. These hooks cover a variety of common use cases in React development, including state and effect management, interactions with APIs, UI-related enhancements, and more.

Installation

To use these hooks in your projects, you first need to install the package. Run the following command in your project directory:

npm install @mralbelo/react-hooks

Available Hooks

This library includes several custom hooks:

• useFetch: Fetches data from a specified URL and manages loading, error, and data states for asynchronous API calls.
• usePromise: A generic hook designed to handle asynchronous operations based on promises. It manages the state of the promise execution and provides states for loading, error, and the resolved data. This hook abstracts the common logic needed to execute a promise, capture its result, and handle loading and error states, allowing for manual re-execution of the promise when necessary.
• useDocumentTitle: Manages the document title of the web page, with options to persist the title change after the component unmounts or react to dependencies.
• useLocalStorage: Manages a state value synchronized with localStorage, providing persistence across browser sessions and optional expiration for stored items.

Usage

Here's how you can use the hooks from this package in your React components:

useFetch

import { useFetch } from '@mralbelo/react-hooks';

function App() {
    const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1');

    return (
        <div>
            {loading ? <p>Loading...</p> :
                error ? <p>Error: {error.message}</p> :
                    <p>{data?.title}</p>}
        </div>
    );
}

usePromise

import { usePromise } from '@mralbelo/react-hooks';
function App() {
    const { data, loading, error, execute } = usePromise(fetchData);
    
    useEffect(() => { execute();}, [execute]);

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

    return (
        <div>
            <p>{data}</p>
            <button onClick={execute}>Reload</button>
        </div>
    );
}

useDocumentTitle

import { useDocumentTitle } from '@mralbelo/react-hooks';

function App() {
    useDocumentTitle("Page Title", true); // The title will persist even after the component unmounts

    return <h1>Hello World!</h1>;
}

useLocalStorage

import { useLocalStorage } from '@mralbelo/react-hooks';

function App() {
    const [name, setName] = useLocalStorage('name', 'Anonymous', 3600000); // Optional expiration time of 1 hour

    return (
        <div>
            <input type="text" value={name} onChange={e => setName(e.target.value)} />
            <p>{name}</p>
        </div>
    );
}

License

MIT