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 foruseWindowWidthCategory
, the checks for thesm
,md
andlg
categories will be truthy iflowerBound <= window.innerWidth
instead oflowerBound <= 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
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.
- Removed