Installation
With yarn
:
yarn add estafette
With npm
:
npm install estafette
useRequest(initialValues)
Hook function for fetching data. Every request will save data or validation errors and turn on/off loading.
Arguments
initialValues
(Object): an object with initial values
const estafette = useRequest({
loading: true,
data: { title: 'Initial title' },
errors: { title: 'This field is required' },
});
Returns
-
request
a function which executes another callback function, stores request data, switches on/off loading and catches errors -
data
stores all data from callback function -
errors
catches all errors from callback function -
loading
stores loading state
import React, { useEffect } from 'react';
import axios from 'axios';
import { useRequest } from 'estafette';
const App = () => {
const { request, data, loading, errors } = useRequest();
useEffect(() => {
request(axios.get('https://jsonplaceholder.typicode.com/todos/1'));
}, []);
if (loading) {
return <span>Loading ...</span>;
}
return (
<div>
<h1>Title: {data.title}</h1>
</div>
);
};
request(data, params)
Concat data in -
request(fn: Function, { concat: boolean | string })
fromuseRequest
as the second argument accepts object params with concat which can be a boolean, it means every new data from callback will concatinate with current data. Also, it can be a string in case when necessary to concatinate just some property from object in data.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useList, useRequest } from 'estafette';
const App = () => {
const [page, setPage] = useState(1);
const { request, data, loading } = useRequest();
useEffect(() => {
request(axios.get('https://jsonplaceholder.typicode.com/posts'), { concat: page > 1 });
}, [page]);
const onChangePage = () => setPage(page + 1);
return (
<>
<ul>
{useList(data, (item) => (
<li>{item.title}</li>
))}
</ul>
<button onClick={onChangePage}>{!loading ? 'View more' : 'Loading'}</button>
</>
);
};
request(data, params)
Skip loading or errors steps in In the code bellow with additional parameters for request function we can switch off loading toggle and prevent errors reseting. Can be useful for seamless loading or for keeping validation errors in a form.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useList, useRequest } from 'estafette';
const App = () => {
const [page, setPage] = useState(1);
const { request, data, loading } = useRequest();
useEffect(() => {
request(axios.get('https://jsonplaceholder.typicode.com/posts'), { toggleLoading: false, resetErrors: false });
}, [page]);
return (
<>
<span>{errors.details}</span>
<ul>
{useList(data, (item) => (
<li>{item.title}</li>
))}
</ul>
</>
);
};
useList(data, renderItem)
Hook function for rendering list of data. Every item will be memoized and updated only when their data changes.
Arguments
-
list
(Array): Data -
render
(Function): Render function which will be called for every item in list
<ul>
{useList(['a', 'b', 'c', 'd'], (item, i) => (
<li>
{i + 1}. {item}
</li>
))}
</ul>
Use direct in JSX
You can get the error Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
if you show or hide HOOK after first rendering, for this case you have to save into a variable, like this:
const renderList = useList(['a', 'b', 'c', 'd'], (item, i) => (
<li>
{i + 1}. {item}
</li>
));
return <ul>{renderlist}</ul>;