Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/soroushchehresa/axios-react

🌐 HTTP client component for React based on Axios
https://github.com/soroushchehresa/axios-react

axios axios-react http http-client http-request http-request-handler http-requests javascript react react-axios reactjs response-schema typescript xhr xhr-wrapper

Last synced: 2 months ago
JSON representation

🌐 HTTP client component for React based on Axios

Lists

README

        



# Axios React
[![NPM](https://img.shields.io/npm/v/axios-react.svg)](https://www.npmjs.com/package/axios-react)
[![NPM](https://img.shields.io/npm/dt/axios-react)](https://www.npmjs.com/package/axios-react)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

HTTP client component for React with child function callback to create async requests in render based on [Axios](https://github.com/axios/axios).


## Installation
Yarn:
```bash
$ yarn add axios-react
```
npm:
```bash
$ npm i -S axios-react
```


## Live example
**[Online Playground](https://stackblitz.com/edit/react-2et9ls)**


## Usage

```jsx
import React from 'react';
import Request from 'axios-react';

const Demo = () => (

{({ loading, response, error, refetch, networkStatus }) => (


{networkStatus && {networkStatus}}
{loading && Loading...}
{error && {error.response.data}}
{response &&

{response.data.title}

}
Refetch!

)}

);
```


## Arguments
| Name | Type | Description |
| ---- | ---- | ----------- |
| loading | boolean | Request loading. |
| response | object | The response for a request contains the [Axios response schema](https://github.com/axios/axios#response-schema). |
| error | object | The error for a request. |
| refetch | function | Refetch method for a request. |
| networkStatus | string | Network Connection Status. |


## Props

| Name | Type | Default value | Options | Description |
| ---- | ---- |------ | ------------- | ----------- |
| config | object | None | [Axios request config options](https://github.com/axios/axios#request-config) | Config options for making requests. |
| skip | boolean | false | true or false | Disable sending requests when mounting the component. |


## Read more
- [The easiest way to create HTTP requests in React.js](https://medium.com/@soroushchehresa/the-easiest-way-to-create-http-requests-in-react-js-6fa4b1819b3c)


## Support