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: 26 days ago
JSON representation

🌐 HTTP client component for React based on Axios

• Host: GitHub
• URL: https://github.com/soroushchehresa/axios-react
• Owner: soroushchehresa
• Created: 2019-04-17T09:33:07.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-08-27T10:04:28.000Z (over 3 years ago)
• Last Synced: 2024-04-26T07:22:34.559Z (8 months ago)
• Topics: axios, axios-react, http, http-client, http-request, http-request-handler, http-requests, javascript, react, react-axios, reactjs, response-schema, typescript, xhr, xhr-wrapper
• Language: TypeScript
• Homepage: https://npmjs.com/package/axios-react
• Size: 228 KB
• Stars: 45
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-components - axios-react - HTTP client component for React. (Code Design / Props from server)
• awesome-react-components - axios-react - HTTP client component for React. (Code Design / Props from server)
• fucking-awesome-react-components - axios-react - HTTP client component for React. (Code Design / Props from server)

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