React-http-request

React component exposes network request functionality

Useful component to perform a network request and parse the response using superagent module.

Installation

Using npm:

npm install --save react-http-request

Supposing a CommonJS environment, you can simply use the component in this way:

import React, { Component } from 'react';
import Request from 'react-http-request';

export default class App extends Component {
  render() {
    return (
      <Request
        url='https://api.github.com/users/mbasso'
        method='get'
        accept='application/json'
        verbose={true}
      >
        {
          ({error, result, loading}) => {
            if (loading) {
              return <div>loading...</div>;
            } else {
              return <div>{ JSON.stringify(result) }</div>;
            }
          }
        }
      </Request>
    );
  }
}

Documentation

This component use its props to perform a network request based on superagent. Here you can find all details about usage.

Callback

The prop children of this component would be a function that takes an object as parameter. This object is composed by 3 properties:

|Property |Description | |---|---| |error |Contains superagent request error, see this for more information | |result |Contains superagent request response, see this for more information | |loading |True or false, indicates if request is loading or is finished |

This function will be triggered the first time immediately and second time when request is complete. You can see an example to clarify this concept in Installation section.

Props

Here is the list of the props used by the component, as we said before, it is based on superagent, so, you will find the complete documentation in its site, you will find a link for most props.

|Property |Type |Description | |---|---|---| |url |String |Request url | |method |String |Request method: get, head, post, put, delete | |children |function({ error, result, loading }): return node |Function explained above in "callback" section | |type |String |Header Content-Type. docs | |accept |String |Header Accept. docs | |timeout |Number |A timeout after which an error will be triggered. docs | |verbose |Boolean |If true, error messages will automatically be logged to the console | |query |Object or String |Query parameter. docs | |send |Object or String |Post parameter. docs | |headers |Object |Request header. docs | |auth |{ user: '', pass: '' } |Basic authentication. docs | |withCredentials |Boolean |Enables the ability to send cookies from the origin, however only when "Access-Control-Allow-Origin" is not a wildcard ("*"), and "Access-Control-Allow-Credentials" is "true". docs | |buffer |Boolean |To force buffering of response bodies as result.text. docs | |attach |Array of { name: '', path: '', filename: '' } |Attach files. docs | |fields |Array of { name: '', value: '' } |Much like form fields in HTML, you can set field values. docs | |onRequest |function(request): return request |Function that will be called before sending the request. It accept as parameter the request itself and must return the request. This means that you can manually modify the request that will be sent. |

Author

Matteo Basso

• github/mbasso
• @Teo_Basso

Copyright and License

Copyright (c) 2016, Matteo Basso.

React-http-request source code is licensed under the MIT License.