# react-with-websocket

> Higher order components for better experience in React with websocket.

Latest version **3.1.0** (published 2019-07-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-with-websocket
pnpm add react-with-websocket
yarn add react-with-websocket
bun add react-with-websocket
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2019-07-23 |
| First published | 2019-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 70.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Librazy |
| Maintainers | librazy |
| Keywords | react, react-components, higher-order-component, websocket |

## Links

- npm: https://www.npmjs.com/package/react-with-websocket
- Repository: git@github.com:Librazy/react-with-websocket
- Homepage: https://github.com/Librazy/react-with-websocket
- Issues: https://github.com/Librazy/react-with-websocket/issues
- npm.io page: https://npm.io/package/react-with-websocket

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 3.1.0 (latest) — 2019-07-23
- 3.0.5 — 2019-04-01
- 3.0.4 — 2019-04-01
- 3.0.0 — 2019-03-31
- 2.1.0 — 2019-03-31
- 2.0.0 — 2019-03-30
- 1.0.6 — 2019-03-30
- 1.0.5 — 2019-03-30
- 1.0.4 — 2019-03-30
- 1.0.3 — 2019-03-30
- 1.0.2 — 2019-03-29
- 1.0.0 — 2019-03-29
- 0.3.0 — 2019-03-26
- 0.2.1 — 2019-03-26
- 0.2.0 — 2019-03-26
- … 3 more at https://npm.io/package/react-with-websocket/versions

## README

# React withWebSocket

Higher order components for better experience in React with websocket.

[![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=Librazy/react-with-websocket)](https://dependabot.com)

## Usage (with `WebSocket` from browser)

First, create a `WebSocket` object (for example, `ws`) in your (lower as possible) common ancestor of Components that require data from WebSocket, and wrap its children with a `<WebSocketContextProvider value={ws}>`.

That will be the source of WebSocket for those Components.

For each Component, we need to:

1. Subscribe to a WebSocket

2. Provide it a WebSocket

For the first part, we will create a subscription using `createSubscription`

```typescript
const withSubscription = createSubscription(
    initState,
    fallbackProps,
    mapStateToProps,
    mapMessageToState,
    mapEventToState,
)
```

The subscription has a state initialized with `initState`. When there are new message from WebSocket, you need to `mapMessageToState`.

> It receive a message event, return new state (or a function that map previous state to new state).

Similarly when there are new event like `open`,`close`,`error`, you can `mapEventToState` but that is optional.

Then you `mapStateToProps`.

> It receive current state (and optionally the WebSocket object) and map it to (some of) your Component's props.
>
> If the props returned from `mapStateToProps` is falsey, then it will use the value from `fallbackProps`.

Finally you apply the subscription to Component.

```typescript
const ComponentWithSubscription = withSubscription(Component)
```

And the second part, let's feed the result with a WebSocket:

```typescript
const ComponentWithWebSocketSubscription = withWebSocket(Component)
```

Then, you can use `ComponentWithWebSocketSubscription` in place of `Component` with some props subscribed to WebSocket.

For convenient, `createWebSocketSubscription` works as `createSubscription` then `withWebSocket`.

[![FOSSA Status](https://app.fossa.io/api/projects/custom%2B5289%2Fgit%40github.com%3ALibrazy%2Freact-with-websocket.git.svg?type=large)](https://app.fossa.io/projects/custom%2B5289%2Fgit%40github.com%3ALibrazy%2Freact-with-websocket.git?ref=badge_large)

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