react-http-request

React component exposes network request functionality

Usage no npm install needed!

<script type="module">
  import reactHttpRequest from 'https://cdn.skypack.dev/react-http-request';
</script>

README

React-http-request

npm npm

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

Copyright and License

Copyright (c) 2016, Matteo Basso.

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