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, jaxDefaults } from 'react-jax';
import superagent from 'superagent';

/* set global defaults */
jaxDefaults.client = superagent; // IMPORTANT
jaxDefaults.pendingKey = 'loading';

/* overwrite global options for a specific component */
@jax({ // same as defaults
    methods: ['get', 'post', 'del', 'put'],
    pendingKey: 'pending',
    abortKey: 'abort'
})
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

These options can be passed to the jax() function. Or be set on the exported jaxDefaults object.

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']

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.