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