react-jax

react-jax

A tiny higher order component to manage AJAX requests in React components.

• Automatically aborts requests on componentWillUnmount.
• Supports many AJAX clients.
• Exposes components pending state as a property.
• Abort all pending requests at will.

Example

import React from 'react';
import jax from 'react-jax';
import superagent from 'superagent';

@jax(superagent)
export default class MyComponent extends React.Component {

    sendRequest = () => {
        this.props.get('https://example.com').end((err, res) => {
          // your code
        });
    }

    render() {
        return this.props.pending ?
            <button onClick={this.sendRequest}>Click Me</button> :
            <button onClick={this.props.abort}>Cancel</button>;
    }
}

API

As a decorator

@jax(options)
export default class Test extends React.Component {
    /* your code */
}

As a function

class Test extends React.Component {
    /* your code */
}

export default jax(options)(Test);

Options

You can choose to pass a superagent client or an object for additional options.

These options can be passed to the jax() decorator.

client required

methods defaults to ['get', 'post', 'del', 'put']

Array of jax methods to expose as properties.

pendingKey defaults to pending

Property name to expose the pending status as.

abortKey defaults to abort

Property name to expose the abort function as.

endEvents defaults to ['end', 'abort', 'error']

Events emitted by the clients request object than indicate it should be cleaned up.

Properties

props[abortKey]() -> undefined

Aborts all pending requests sent by the component.

props[pendingKey] -> boolean

Returns true if any request sent by the component are pending.

props[method](...args) -> req

Exact same function signature the client exposes. For example, superagent will expose functions like these.