react-ajax-client

Consume rest endpoints using react components. Inspired by ApolloClient

Install

npm install --save react-ajax-client

yarn add react-ajax-client

Usage

import React from "react";

import { Provider, Fetch, Send, Client } from "react-ajax-client";

const client = new Client({
    baseURL: "http://mywebsite.com/api",
    headers: {
        "Content-Type": "application/json"
    }
});

const ListUsers = () => (
    <Fetch path="/users">
        {({ loading, error, data }) => {
            if (loading) {
                return <div>Loading...</div>;
            }

            if (error) {
                return <div>{error.message}</div>;
            }
            return <pre>{JSON.stringify(data, null, 4)}</pre>;
        }}
    </Fetch>
);

const CreateUser = () => (
    <Send
        path="/users"
        onProgress={() => console.log("Processing")}
        onComplete={response =>
            console.log("Completed", JSON.stringify(response))
        }
        onError={response => console.error("Error", JSON.stringify(response))}
    >
        {trigger => (
            <button
                onClick={e => trigger({ firstName: "Billy", lastName: "Jean" })}
            >
                Create a User
            </button>
        )}
    </Send>
);

const MyApp = () => (
    <Provider client={client}>
        <div>
            <h1>My App</h1>
            <CreateUser />
            <ListUsers />
        </div>
    </Provider>
);

Components

Client

Instantiation

import { Client } from "react-ajax-client";

const client = new Client({
    baseURL: "https://www.mywebsite.com/api",
    headers: {
        "Content-Type": "application/json"# react-ajax-client

> Consume rest endpoints using react components. Inspired by [ApolloClient](https://github.com/apollographql/react-apollo)

[![NPM](https://img.shields.io/npm/v/react-ajax-client.svg)](https://www.npmjs.com/package/react-ajax-client) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-ajax-client

yarn add react-ajax-client

Usage

import React, { Component, Fragment, useState } from "react";
import { Provider, Client, Fetch, Send } from "react-ajax-client";

const client = new Client({
    baseURL: "https://www.mywebsite.com/api",
    headers: {
        "Content-Type": "application/json"
    },
    onRequest: request => {
        console.log(request);
        request.headers.append("x-auth-token", Date.now());
    },
    onResponse: response => {
        console.log(response);
    }
});

const List = () => {
    return (
        <Fragment>
            <h3>List Component</h3>
            <Fetch path="/unkknown">
                {({ loading, error, data }) => {
                    if (loading) {
                        return <div>Loading...</div>;
                    }

                    if (error) {
                        return <div>{error.message}</div>;
                    }
                    return <pre>{JSON.stringify(data, null, 4)}</pre>;
                }}
            </Fetch>
        </Fragment>
    );
};

const Button = () => {
    const [status, setStatus] = useState("None");

    return (
        <Fragment>
            <h3>Button Component</h3>
            <div>Status: {status}</div>
            <Send
                path="/unknown"
                onProgress={() => setStatus("Processing...")}
                onComplete={response =>
                    setStatus("Completed: " + JSON.stringify(response))
                }
                onError={response =>
                    setStatus("Error:" + JSON.stringify(response))
                }
            >
                {trigger => (
                    <button onClick={e => trigger({ name: "Item1" })}>
                        Create Item
                    </button>
                )}
            </Send>
        </Fragment>
    );
};

export default class App extends Component {
    render() {
        return (
            <Provider client={client}>
                <div>Welcome to React Ajax Client</div>
                <Button />
                <List />
            </Provider>
        );
    }
}

Components

Client

| Option | Type | Default | Description | | ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | baseURL | string | "" | The api endpoint of the backend | | headers | object | {} | A key value pair of http headers | | onRequest | function | | a middleware function called before each request passed the request instance | | onResponse | function | | a afterware function called after each request passed the response instance |

Provider

Wrap your root component with this Provider

| Param | Type | Description | | ------ | ---------------------------------------------------------------------------------------------- | ------------------------------- | | client | Client | An instance of the Client Class |

Fetch

Send

Provider

Fetch

Send

License

MIT © aiosifelis