# react-web-bluetooth

> React hooks wrapper for the Web Bluetooth API

Latest version **1.0.0** (published 2021-02-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-web-bluetooth
pnpm add react-web-bluetooth
yarn add react-web-bluetooth
bun add react-web-bluetooth
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-02-16 |
| First published | 2021-02-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 32.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Almir Bijedic |
| Maintainers | venith |

## Links

- npm: https://www.npmjs.com/package/react-web-bluetooth
- Repository: https://github.com/almirbi/react-web-bluetooth
- Issues: https://github.com/almirbi/react-web-bluetooth/issues
- npm.io page: https://npm.io/package/react-web-bluetooth

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^17.0.1

## Recent versions

- 1.0.0 (latest) — 2021-02-16

## README

# React Hooks for Web Bluetooth

This is a package that provides a hooks wrapper around the new [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API)

It is an experimental feature implemented under a flag in Chrome. In order to use this feature in Chrome, enable:

`chrome://flags/#enable-experimental-web-platform-features`

The `getDevices` method requires also to enable the new permissions backend experimental feature.

`chrome://flags/#enable-web-bluetooth-new-permissions-backend`

`getDevices` is used to retrieve already paired Bluetooth devices from the browser, for example after a refresh instead of pairing a device again `getDevices` can be used to connect to it without pairing.

# Example

```
const { onClick, device } = useRequestDevice({
  acceptAllDevices: true,
});

// ...

return <>
  {!device && <button onClick={onClick}>Connect</button>}
  {device && <span>{device.name}</span>}
</>
```

# API

### `useGetServer`

_Params:_

`device`: [BluetoothDevice](https://developer.mozilla.org/en-US/docs/Web/API/BluetoothDevice)

_Returns:_

`server`: [BluetoothRemoteGATTServer](https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTServer)

<br/>

### `useGetCharacteristic`

_Params:_

`service`: [BluetoothRemoteGATTService](https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTService)

`bluetoothCharacteristicUUID`: string

_Returns:_

`characteristic`: [BluetoothRemoteGATTCharacteristic](https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTCharacteristic)

<br/>

### `useGetDevices`

_Returns:_ `devices[]`: BluetoothDevice[]

<br/>

### `useRequestDevice`

_Params:_

`options`: https://developer.mozilla.org/en-US/docs/Web/API/Bluetooth/requestDevice#parameters

_Returns:_

`onClick`: (event) => void // returns a onClick function that can be used to trigget the browser's pairing window and list the scanned Bluetooth devices.

`device`: BluetoothDevice // returns a device chosen from the Bluetooth pairing dialogue.

<br/>

### `useGetPrimaryService`

_Params:_

`device`: BluetoothDevice

_Returns:_

`service`: [BluetoothRemoteGATTService](https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTService)

<br/>

### `useReadValue`

_Params:_

`characteristic`: [BluetoothRemoteGATTCharacteristic](BluetoothRemoteGATTCharacteristic)

_Returns:_:

`value`: [DataView](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView)

<br/>

### `writeValue`

_Params:_

`characteristic`: [BluetoothRemoteGATTCharacteristic](BluetoothRemoteGATTCharacteristic)

`value`: [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)

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