react-jax

react-jax

A tiny decorator 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;
jaxDefaults.pendingKey = 'loading';

/* overwrite options for a 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.

Properties

props[abortKey]() -> undefined

Aborts all pending requests sent by the component.

props[pending] -> boolean

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

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

Exact same function signatures that jax exposes. See relevant jax code.