# @socket-studio/preact

> React tools for using Socket Studio

Latest version **1.0.0-canary.17** (published 2021-01-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install @socket-studio/preact
pnpm add @socket-studio/preact
yarn add @socket-studio/preact
bun add @socket-studio/preact
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-canary.17 |
| Published | 2021-01-29 |
| First published | 2020-11-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 30.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jason Lengstorf |
| Maintainers | jlengstorf |

## Links

- npm: https://www.npmjs.com/package/@socket-studio/preact
- Repository: https://github.com/socket-studio/preact
- Homepage: https://github.com/socket-studio/preact#readme
- Issues: https://github.com/socket-studio/preact/issues
- npm.io page: https://npm.io/package/@socket-studio/preact

## Dependencies (6)

- [urql](https://npm.io/package/urql.md) ^1.11.1
- [graphql](https://npm.io/package/graphql.md) ^15.4.0
- [@urql/preact](https://npm.io/package/@urql/preact.md) ^1.4.1
- [isomorphic-ws](https://npm.io/package/isomorphic-ws.md) ^4.0.1
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^3.0.0
- [subscriptions-transport-ws](https://npm.io/package/subscriptions-transport-ws.md) ^0.9.18

## Recent versions

- 1.0.0-canary.17 (latest) — 2021-01-29
- 1.0.0-canary.0 (canary) — 2020-11-09
- 1.0.0-canary.16 — 2021-01-06
- 1.0.0-canary.15 — 2021-01-06
- 1.0.0-canary.14 — 2020-11-10
- 1.0.0-canary.13 — 2020-11-10
- 1.0.0-canary.12 — 2020-11-10
- 1.0.0-canary.11 — 2020-11-10
- 1.0.0-canary.10 — 2020-11-10
- 1.0.0-canary.9 — 2020-11-10
- 1.0.0-canary.8 — 2020-11-10
- 1.0.0-canary.7 — 2020-11-10
- 1.0.0-canary.6 — 2020-11-10
- 1.0.0-canary.5 — 2020-11-10
- 1.0.0-canary.4 — 2020-11-09
- … 3 more at https://npm.io/package/@socket-studio/preact/versions

## README

# React Tools for Socket Studio

Wrap the parts of your app that need Socket Studio access in the provider:

```jsx
import { createSocketStudioClient, SocketStudioProvider } from '@socket-studio/react';

export function MyAppWrapper({ children }) {
  const url = 'https://api.streamblitz.com/graphql';
  const client = createSocketStudioClient(url);

  return (
    <SocketStudioProvider client={client}>
      {children}
    </SocketStudioProvider>
  )
}
```

In any component wrapped by the provider, you can access Twitch chat data like so:

```jsx
import { useTwitchChat } from '@socket-studio/react';

export function MyChat() {
  const twitchChannel = 'jlengstorf';
  const { chat, commands, currentCommand } = useTwitchChat(twitchChannel);

  return (
    <pre>{JSON.stringify({ chat, commands, currentCommand }, null, 2)}</pre>
  )
}
```

---
_Source: https://npm.io/package/@socket-studio/preact · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._