react-use-fetch-hooks

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