estafette
v1.0.18
Published
Estafette helps you write code a bit faster
Downloads
137
Maintainers
Readme
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 errorsdata
stores all data from callback functionerrors
catches all errors from callback functionloading
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>
);
};
Concat data in request(data, params)
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>
</>
);
};
Skip loading or errors steps in request(data, params)
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): Datarender
(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>;