# react-socket-hook

> ![GitHub](https://img.shields.io/github/license/leihancn/react-socket-hook) ![David](https://img.shields.io/david/leihancn/react-socket-hook) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/leihancn/react-socket-hook) ![GitH

Latest version **1.0.4** (published 2021-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-socket-hook
pnpm add react-socket-hook
yarn add react-socket-hook
bun add react-socket-hook
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-07-22 |
| First published | 2020-12-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 雷玮杰 |
| Maintainers | vingeray |
| Keywords | react, parcel, react-hooks, socket, latest |

## Links

- npm: https://www.npmjs.com/package/react-socket-hook
- npm.io page: https://npm.io/package/react-socket-hook

## 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

- 1.0.4 (latest) — 2021-07-22
- 1.0.2 — 2020-12-23
- 1.0.1 — 2020-12-23
- 1.0.0 — 2020-12-23

## README

## React Socket Hook

![GitHub](https://img.shields.io/github/license/leihancn/react-socket-hook)
![David](https://img.shields.io/david/leihancn/react-socket-hook)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/leihancn/react-socket-hook)
![GitHub release (latest by date)](https://img.shields.io/github/v/release/leihancn/react-socket-hook)
![npm type definitions](https://img.shields.io/npm/types/typescript)
![GitHub package.json dynamic](https://img.shields.io/github/package-json/keywords/leihancn/react-socket-hook/main)

#### 使用

```shell
# install
yarn add react-socket-hook
```

#### 基础用法

```tsx
import useSocket from 'react-socket-hook'

const { send } = useSocket('wss://echo.websocket.org', {
  onReceived: (data: DataType) => {
    // handle data in here.
  }
})

// send some data
send('something')
```

#### 声明

```ts
export declare type DataType = string | ArrayBufferLike | Blob | ArrayBufferView

export interface UseSocketOptions {
  protocols?: WebSocket['protocol']
  binaryType?: BinaryType
  /**
   * 自动连接 auto connect server when it is ready.
   * @default true
   */
  autoConnect?: boolean
  onConnected?: () => void
  onClosed?: () => void
  onReceived?: (data: DataType) => void
  onError?: (errEvent: Event) => void
}

export interface UseSocketReturn {
  /**
   * 主动调用来拉起连接。 connect server.
   * 如果当前已是连接状态，则会保持状态。 if it is connected, will keep state.
   */
  connect: () => void
  /**
   * 主动断开连接。 disconnect server.
   */
  close: () => void
  /**
   * 发送数据。send data to server.
   * @param data
   */
  send: (data: DataType) => Promise<void>
}

export declare type UseSocket = (
  url: string,
  options?: UseSocketOptions
) => UseSocketReturn
```

#### 常用指令

```shell
# 开发 develop
yarn dev
# 打包 build package
yarn build
# 提交代码 commit code
yarn cz
```

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