react-jax

    1.1.0 • Public • Published

    react-jax Build Status

    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.

    Keywords

    none

    Install

    npm i react-jax

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • floadmin
    • unboundev
    • aembke
    • kwilson
    • stegmanh