# react-rest-connect

> Type safe way of connecting React components to REST endpoints

Latest version **0.6.1** (published 2019-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-rest-connect
pnpm add react-rest-connect
yarn add react-rest-connect
bun add react-rest-connect
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.1 |
| Published | 2019-02-13 |
| First published | 2019-01-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andrei Picus |
| Maintainers | nighttrax |
| Keywords | react, typescript, rest, api, state, container |

## Links

- npm: https://www.npmjs.com/package/react-rest-connect
- Repository: https://github.com/NiGhTTraX/react-connect-rest
- Homepage: https://github.com/NiGhTTraX/react-connect-rest#readme
- Issues: https://github.com/NiGhTTraX/react-connect-rest/issues
- npm.io page: https://npm.io/package/react-rest-connect

## Dependencies (2)

- [sinon](https://npm.io/package/sinon.md) ~7.2.0
- [react-state-connect](https://npm.io/package/react-state-connect.md) ~1.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.6.1 (latest) — 2019-02-13
- 0.6.0 — 2019-02-09
- 0.5.0 — 2019-02-06
- 0.4.0 — 2019-01-12
- 0.3.0 — 2019-01-11
- 0.2.3 — 2019-01-11
- 0.2.2 — 2019-01-11
- 0.2.1 — 2019-01-11
- 0.2.0 — 2019-01-11
- 0.1.0 — 2019-01-11
- 0.0.4 — 2019-01-03
- 0.0.3 — 2019-01-03
- 0.0.2 — 2019-01-03
- 0.0.1 — 2019-01-02

## README

> This is what I imagine a type safe way of connecting a React component
to a REST endpoint might look like. Heavily opinionated and not production
ready, this is an _**experimental project**_.

[![Build Status](https://travis-ci.com/NiGhTTraX/react-rest-connect.svg?branch=master)](https://travis-ci.com/NiGhTTraX/react-rest-connect)
[![codecov](https://codecov.io/gh/NiGhTTraX/react-rest-connect/branch/master/graph/badge.svg)](https://codecov.io/gh/NiGhTTraX/react-rest-connect)

----

## Usage

```tsx
import connectToRest, { IRestStore } from 'react-rest-connect';

interface MyViewProps {
  container: IRestStore<number>;
}

const MyView = ({ myData, foo }: MyViewProps) => <div>
  {myData.state.loading ? 'Loading...' : <p>
    Here is the data from the API:
    {JSON.stringify(myData.state.response)}
  </p>}
</div>;

// All 3 types need to be specified until
// https://github.com/Microsoft/TypeScript/issues/10571 is implemented.
const ConnectedView = connectToRest<MyViewProps, number, 'myData'>(
  MyView, '/my/api/', 'myData'
);

ReactDOM.render(<ConnectedView />);
```


## Assumptions

As mentioned, this lib has opinions about how a REST endpoint
looks like and how the data it returns looks like.

1. All entities can be uniquely identifiable by an `id` key.


## Connecting multiple views to the same API

```tsx
import connectToRest, { RestStore, IRestStore } from 'react-rest-connect';

const container = new RestStore<number>('/my/api/');

interface MyViewProps {
  container: IRestStore<number>;
}

const MyView1 = ({ container, foo }: MyViewProps) => null;
const MyView2 = ({ container, foo }: MyViewProps) => null;

// We'll have a single container querying the API and multiple
// views listening to it.
const ConnectedView1 = connectToRest(MyView, container, 'container');
const ConnectedView2 = connectToRest(MyView, container, 'container');

ReactDOM.render(<div>
  <ConnectedView1 />
  <ConnectedView2 />
</div>);
```


## Testing

You can create stores with mocked data for use in tests:

```tsx
import { RestStoreMock } from 'react-rest-connect';

const mock = new RestStoreMock<number>([1, 2, 3]);

mock.state.loading === false
mock.state.response[0] === 1
```

---
_Source: https://npm.io/package/react-rest-connect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._