1.0.11 • Published 4 years ago
react-ajax-client v1.0.11
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