fetch-yo-mama
v0.3.0-rc.2
Published
Fetch API QoL hooks for React.
Downloads
88
Maintainers
Readme
fetch-yo-mama
Fetch API QoL hooks for React.
The request will be automatically aborted if the component is unmounted
Usage
Step - 0
Install the library
yarn add fetch-yo-mama
Step - 1
Wrap the app with FetchProvider and pass
aliases
.
import { FetchProvider } from 'fetch-yo-mama';
import Root from './src/root';
export default function App() {
return (
<FetchProvider
aliases={{
default: {
baseUrl: 'https://jsonplaceholder.typicode.com',
headers: { 'Content-Type': 'application/json' },
},
custom: {
baseUrl: 'https://coolapi.com',
bodyType: 'formdata', // json|formdata|original. default: json
},
}}>
<Root />
</FetchProvider>
);
}
Step - 2
Use the hook:
import { useGet } from 'fetch-yo-mama';
export default function UserList() {
const [usersRequest, fetchUsers, abortControllerRef, clearState] = useGet('/users');
if (usersRequest.loading) return <p>Loading...</p>;
if (usersRequest.error) return <p>Error Loading Data</p>;
return (
<>
{usersRequest.response.map((u) => (
<p>{u.name}</p>
))}
</>
);
}
Customize request
const [requestState, request, abortControllerRef] = useGet('/custom', {
alias: 'custom',
params: {},
headers: {},
loadOnMount: false, // Don't fetch on mount
...anyOtherFetchParam,
});
Other methods
import { usePost, useDelete, usePatch, usePut } from 'fetch-yo-mama';
export default function Component() {
// fetch params
const fetchParams = {
body: {},
params: {},
headers: {},
..anyOtherFetchParam
};
const {
error,
response,
request,
loading,
abortControllerRef, // abortControllerRef.current.abort() to manually abort the request
} = usePost('/user', {
...fetchParams,
});
}
TODO:
- [x] Rewrite to TypeScript
- [ ] Image upload progress
- [ ] Change name
- [ ] Docs