);
}
}
```
A working, prettier example of this reddit app can be found on [codesandbox](https://codesandbox.io/s/use-remote-resource-example-f130i)
## Usage
### Requirements
This library requires `class-hooks` as a peer dependency.
### Install
Install by running:
```bash
npm install @class-hooks/use-remote-resource
```
or if you prefer yarn:
```bash
yarn add @class-hooks/use-remote-resource
```
Once installed, you can import the hook from the package:
```js
import { useRemoteResource } from '@class-hooks/use-remote-resource';
```
### API
#### Basic
The most simple implementation only requires the url of the data to fetch:
```jsx
class MyComponent extends React.Component {
resource = useRemoteResource(this, 'http://...');
render() {
data: {this.resource.data()}
status: {this.resource.status()}
}
}
```
It will start loading the resource as soon as the component mounts, and will re-render when the data arrives.
As you can see in the example above, the the hook returns two getters:
- `data(): T`: returns the body of the response, if arrived successfully, or null otherwise.
- `status(): RemoteResourcePollingStatus`: returns the status of the current poll: "loading", "success", or "failed"
In addition, it returns a method called `poll`, which invokes fetching the data.
#### Periodic Polling
In case you want to write a "realtime" application such as a chat, and use a polling mechanism, you can use the `autoPollInterval` option. Consider the following app:
```jsx
class ChatApp extends React.Component {
chatHistory = useRemoteResource(this, 'http://...', { autoPollInterval: 1000 });
render() {
}
}
```
The resulting component will display the up-to-date messages and will refresh them every second.
#### Additional Options
##### Send Headers
In some cases, you might want to pass headers with the request (such as authorization headers). In order to do so, pass a headers map over with the `headers` option:
```jsx
const headers = { Authorization: 'Bearer QW1hemluZyBjb2RlciBzbGFzaCBnZW5pdXM=' }
class MyComponent extends React.Component {
resource = useRemoteResource(this, 'http://...', { headers });
render() {
data: {this.resource.data()}
status: {this.resource.status()}
}
}
```
##### On Mount Behavior
By default, the remote resource will be polled as soon as the component mounts. This behavior, however, can be overridden by passing the `pollOnMount` option:
```jsx
class MyComponent extends React.Component {
resource = useRemoteResource(this, 'http://...', { pollOnMount: false });
render() {
data: {this.resource.data()}
status: {this.resource.status()}
}
}
```
---
_Source: https://npm.io/package/@class-hooks/use-remote-resource · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._