Lightweight asynchronous data fetching hook for React. You can use this Hook for all request methods like GET, POST, PUT, DELETE, etc.
- Data fetching (REST, promises).
- Method to handle data, access fetched data, isError, isLoading, isSuccess and validation properties.
- Is build for user experience in mind by being fast and high level of error handling.
- Never let your users miss any backend error(s). Catch all backend error(s) from frameworks like Laravel, Flask, Express, Django and many more into one single string.
- Can be used for all methods like GET, POST, PUT, DELETE, etc.
- Access validation data properties like form input errors or old input values.
- Fetched data is automatically served as JavaScript object.
- Add Custom fetch options like additionalCallTime or abortTimeoutTime.
- Takes advantage of React reactivity.
- Can work with TanStack Query.
handleData,
fetchedData,
isError,
error, // string for flash messages like error or warning
errors, // for form input errors, old input values or nested error messages
isLoading,
isSuccess,
- Install package
npm i lightweight-react-fetch
- Initialize use-lightweight-fetch
import { reactFetch } from 'lightweight-react-fetch';
- Use lightweight asynchronous data fetching hook
import { reactFetch } from 'lightweight-react-fetch';
// use React fetch
const {
handleData,
fetchedData,
isError,
error,
errors,
isLoading,
isSuccess,
} = reactFetch();
const submitPost = function () {
handleData(
'/posts', // url
{
method: 'POST', // GET, POST, PUT, DELETE, etc.
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
},
// custom options
{
additionalCallTime: 300,
abortTimeoutTime: 8000,
}
);
};
import { reactFetch } from 'lightweight-react-fetch';
const pathPosts = 'https://jsonplaceholder.typicode.com/posts';
// use React fetch
const {
handleData,
fetchedData,
isError,
error,
errors,
isLoading,
isSuccess,
} = reactFetch();
useEffect(() => {
handleProducts(
pathPosts,
{},
{
additionalCallTime: 300,
abortTimeoutTime: 8000,
}
);
}, []);