react-use-fetch-hooks
v1.2.0
Published
Fetch with simple loading container.
Downloads
16
Maintainers
Readme
react-use-fetch
Fetch with simple loading container.
Getting started
Install with NPM:
$ npm install react-use-fetch-hooks
Usage
Live Demo CodeSandbox
With this component, you can simply manage the loading process when you send fetch requests. You can control the loading process of each fetch request separately. You don't need to write extra code for this.
Example
When you send the fetch request, the field inside the <Loading></Loading>
tags is blocked and becomes accessible again when the request is done or error.
import React from 'react';
import useFetch from 'react-use-fetch-hooks';
import 'react-use-fetch-hooks/dist/index.css';
function App() {
const [Fetch, Loading] = useFetch(
'REQUEST URL',
'REQUEST OPTIONS',
);
return (
<div>
<Loading>
<button type="button" onClick={() => Fetch()}></button>
</Loading>
</div>
);
};
export default App;
Properties
Descriptions and configuration settings for component properties.
useFetch
| Property | Type | Required | Default | Description | |--------------------------|---------------------|----------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | url | string | no | null | Fetch request uri. | | requestOptions | string | no | null | Fetch request options. |
Fetch
| Property | Type | Required | Default | Description | |--------------------------|---------------------|----------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | data | object | no | null | Fetch body. |
Loading
| Property | Type | Required | Default | Description | |--------------------------|---------------------|----------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | dark | bool | no | false | Use dark theme loading overlay. | | className | string | no | null | Loading container custom class. | | button | bool | no | false | Fetch loading only button. |
Author
Barış Ateş
- http://barisates.com
- github/barisates