# react-axios-connect
> Simple axios HOC for react components
Latest version **1.1.6** (published 2019-10-02) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install react-axios-connect
pnpm add react-axios-connect
yarn add react-axios-connect
bun add react-axios-connect
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 1.1.6 |
| Published | 2019-10-02 |
| First published | 2018-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 57.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | alex-ch |
| Keywords | axios, react, hoc |
## Links
- npm: https://www.npmjs.com/package/react-axios-connect
- Repository: https://github.com/achepukov/react-axios-connect
- Homepage: https://github.com/achepukov/react-axios-connect#readme
- Issues: https://github.com/achepukov/react-axios-connect/issues
- npm.io page: https://npm.io/package/react-axios-connect
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.1.6 (latest) — 2019-10-02
- 1.1.5 — 2019-09-01
- 1.1.4 — 2019-08-31
- 1.1.3 — 2019-07-17
- 1.1.2 — 2019-07-05
- 1.1.1 — 2019-07-05
- 1.1.0 — 2019-04-14
- 1.0.25 — 2019-04-01
- 1.0.24 — 2019-03-23
- 1.0.23 — 2019-01-12
- 1.0.22 — 2019-01-12
- 1.0.21 — 2019-01-01
- 1.0.20 — 2019-01-01
- 1.0.19 — 2019-01-01
- 1.0.18 — 2018-12-31
- … 13 more at https://npm.io/package/react-axios-connect/versions
## README
[](https://travis-ci.com/achepukov/react-axios-connect)
[](https://coveralls.io/github/achepukov/react-axios-connect?branch=master)
# HOC for react component to use axios
Simple [HOC](https://reactjs.org/docs/higher-order-components.html) which provides nice axios features as props.
## Install
`yarn add axios react-axios-connect`
`npm i axios react-axios-connect --save`
## How to use
This hoc pass `makeRequest()`, `isLoading`, `response` and `error` props to the wrapped component:
```
{
error: null | Error, // Axios error if any
isLoading: boolean, // whether request is in progress
makeRequest: (urlOrRequestParams, method = 'get', data = {}, config = {}) => Promise,
response: Object, // Axios response object, see https://github.com/axios/axios#response-schema
}
```
You can also [spread the response](#spreadresponse-key) or [specify you own mapping](#mapping-key) for the props
### Very Basic exapmple
```
import axiosConnect from 'react-axios-connect';
class SomeComponent extends React.PureComponent {
componentDidMount() {
this.props.makeRequest('/some-api')
}
render() {
const { response: { data }, isLoading, error } = this.props;
if (isLoading) {
return '...loading';
}
if (error) {
return 'An error occurred: ' + error;
}
return 'Got this data: ' + JSON.stringify(data);
}
}
export default axiosConnect()(SomeComponent);
```
### Availabe params for `makeRequest(url, method, data, config)`
`POST` example:
```
this.props.makeRequest(
'/some-url',
'post',
{data: 'payload', 'for': 'post'}
)
```
`PUT` example with additional headers:
```
const headers = {
Authorization: 'Bearer some-token'
}
this.props.makeRequest(
'/some-url',
'put',
{data: 'payload', 'for': 'post'},
{ headers }
)
```
last param `config` is [request config](https://github.com/axios/axios#request-config)
You can also specify [full request config](https://github.com/axios/axios#request-config) as the only param of `makeRequest`:
```
const requestObj = {
url: '/some/url',
method: 'put',
headers: {
'Accept': 'json',
'Authorization': 'Bearer some-oauth2-key'
}
}
this.props.makeRequest(requestObj)
```
## HOC basic options
axiosConnect accepts the list of options to configure component behavior: `axiosConnect(options)(SomeComponent);`
`options` is an object which tracks the next keys:
```
{
axios: CustomAxiosInstance,
onMountRequestConfig: RequestConfig, // request config to be used in makeRequest on mount
initialData: any, // null by default
mapping: Function, // map hoc props to other props `(hocProps: Object): Object => mappedProps`
spreadResponse: boolean, // false by default, spread the response into data, status, headers e.t.c. props
}
```
#### `axios` key
Pass custom axios instance
#### `onMountRequestConfig` key
[Request config](https://github.com/axios/axios#request-config) to be used in call on component mount. This key also can be passed as a prop. If passed both - hoc option & prop, then prop win.
Example:
```
const onMountRequestConfig = {
url: '/some-url',
method: 'post',
data: { some: 'data' }
}
axiosConnect({ onMountRequestConfig })(Component);
// or
const ConnectedComponent = axiosConnect()(Component);
```
You also can pass a function, it accepts own component props as argument:
```
const ConnectedComponent = axiosConnect({ onMountRequestConfig: props => {url: props.theUrl })(Component);
```
In the example above component will load data from `/some-url`
#### `initialData` key
The initial `response.data` value. At very first load your component won't have any data loaded, so this is useful to not do additional check in your component, i.e. without `initialData` you'll need to write something like:
```
class SomeComponent extends React.PureComponent {
render() {
const { response } = this.props;
if (response.data && response.data.length) {
// omg we finally got the data, let's render it
...
} else {
// either, the very first mount or loading
...
}
}
}
```
If you define initial data, then it'll be something like this:
```
class SomeComponent extends React.PureComponent {
render() {
const { response } = this.props;
// response.data is always array, as either initialData is an array, or server returns the array
return response.data.map( .../* render into particualr elements */ );
}
}
axiosConnect({ initialData: [] })(SomeComponent)
```
#### `spreadResponse` key
If `true` your component will accept [reponse props](https://github.com/axios/axios#response-schema) instead of one prop `response`:
`data`, `status`, `headers`, `config` & `request`. I.e.:
```
class SomeComponent extends React.PureComponent {
render() {
// no response prop here anymore
const { data, status } = this.props;
if (status === 200)
return {JSON.stringify(data)
;
}
}
axiosConnect({ spreadResponse: true })(SomeComponent)
```
#### `mapping` key
You can provide your own mapping hoc props:
```
class SomeComponent extends React.PureComponent {
render() {
// no 'response' prop here anymore
const { requestInProgress, serverResponse, requestError } = this.props;
if (requestInProgress)
return ...loading
;
...
}
}
const mapping = props => ({
serverResponse: props.response,
requestInProgress: props.isLoading,
requestError: props.error,
doRequest: props.makeRequest,
})
axiosConnect({ mapping })(SomeComponent)
```
# Report an issue / improvement
Feel free to [report issue on github](https://github.com/achepukov/react-axios-connect/issues).
---
_Source: https://npm.io/package/react-axios-connect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._