react-simple-hooks2 v4.0.2

react-simple-hooks2

Provides a collection of useful hooks I use frequently in my projects.

Install

npm i -D react-simple-hooks2

This library requires axios^0.19.2 as a peer dependency of the host application. Please make sure you have axios 0.19.2+ installed in your project

Usage

usePreviousValue

Stores a value and makes it available in the next render. This is useful for comparing the value between renders

import React, { useState } from "react";
import { usePreviousValue } from "react-simple-hooks2";

const MyComponent = () => {
    const [value, setValue] = useState(0);
    const previousValue = usePreviousValue(value);

    return (
        <div>
            <p>Previous value (In last render): {previousValue}</p>
            <p>Current value (In current render): {value}</p>
            <button onClick={() => setValue(value + 1)}>Increment</button>
        </div>
    );
};

useWindowWidthCategory

Determines the category of the width of the window according to the breakpoint sizes defined by Bootstrap

import { useEffect } from "react";
import { useWindowWidthCategory } from "react-simple-hooks2";

const MyComponent = () => {
    const { xs, sm, md, lg, xl } = useWindowWidthCategory(); // Default
    const { sm: smUnbounded, md: mdUnbounded, lg: lgUnbounded } = useWindowWidthCategory(true);

    useEffect(() => {
        console.log({
            xs, // True if (window.innerWidth < 576px)
            sm, // True if (576px <= window.innerWidth < 768px)
            md, // True if (768px <= window.innerWidth < 992px)
            lg, // True if (992px <= window.innerWidth < 1200px)
            xl // True if (window.innerWidth >= 1200px)
        });

        console.log({
            smUnbounded, // True if (window.innerWidth >= 576px)
            mdUnbounded, // True if (window.innerWidth >= 768px)
            lgUnbounded // True if (window.innerWidth >= 992px)
        });
    }, [xs, sm, md, lg, xl, smUnbounded, mdUnbounded, lgUnbounded]);

    return null;
};

If true is passed as the argument for useWindowWidthCategory, the checks for the sm, md and lg categories will be truthy if lowerBound <= window.innerWidth instead of lowerBound <= window.innerWidth < upperBound

AxiosProvider

A lot of times when a network request is dispatched, a state variable must be updated to notify the page.

The axios provider configures an axios instance with local interceptors to update an internal state variable so that you don't have to. The provider also allows you to specify request, response and error handlers which each instance uses. These handlers are not attached to the global axios object.

The first step to using this is to wrapp your <App /> component.

import React from "react";
import { render } from "react-dom";
import { AxiosProvider } from "react-simple-hooks2";
import App from "./path/to/app.jsx";

render(
    /// ... other providers
    <AxiosProvider
        onRequest={/* Optional request interceptor */}
        onResponse={/* Optional response interceptor */}
        onError={/* Optional error interceptor */}>
        <App />
    </AxiosProvider>,
    document.getElementById("root")
);

If any of the interceptors are specified, the provider will pass the request, response or error object to it. You must make sure to return the modified request, response or error from your interceptor

After your provider is setup, you can use it in a component that needs to use axios for network requests.

import React, { useContext, useEffect } from "react";
import { AxiosContext } from "react-simple-hooks2";

export const MyAwesomeComponent = () => {
    const { useAxiosInstance } = useContext(AxiosContext);
    const { data, loading, axios: axiosInstance } = useAxiosInstance<any>(null); // You can pass an initial value for the data as an argument

    useEffect(() => {
        axiosInstance.get("my-api/my-endpoint").catch(() => console.error(err));
    }, []);

    return <div>Hello world</div>;
};

The instance returned can be used as you would if you had imported it from the axios library directly.

Maintainers

• Kwame Opare Asiedu

Support

If you'd like to support this project, you can do so by becoming a patreon on Patreon

It would be really helpful if you can star the project on Github

Changelog

• v4.0.0
  • Removed useQueryParams hook. The hook has bee moved to the react-router-simple-transition library because of its dependence on routing functions.