# @bloomprotocol/waci-kit-react

> Render a QR Code or button to initiate a WACI interaction

Latest version **0.1.2** (published 2021-11-12) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @bloomprotocol/waci-kit-react
pnpm add @bloomprotocol/waci-kit-react
yarn add @bloomprotocol/waci-kit-react
bun add @bloomprotocol/waci-kit-react
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2021-11-12 |
| First published | 2021-03-24 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 4 |
| Unpacked size | 392 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Bloom Team |
| Maintainers | jacehensley, djvs |

## Links

- npm: https://www.npmjs.com/package/@bloomprotocol/waci-kit-react
- Repository: https://github.com/hellobloom/ssi-sdk.git#main
- Homepage: https://github.com/hellobloom/ssi-sdk/tree/main#readme
- Issues: https://github.com/hellobloom/ssi-sdk/issues
- npm.io page: https://npm.io/package/@bloomprotocol/waci-kit-react

## Dependencies (4)

- [bowser](https://npm.io/package/bowser.md) ^2.11.0
- [common-tags](https://npm.io/package/common-tags.md) ^1.8.0
- [react-forward-props](https://npm.io/package/react-forward-props.md) ^1.1.2
- [@bloomprotocol/qr-react](https://npm.io/package/@bloomprotocol/qr-react.md) ^3.0.0

## Recent versions

- 0.1.2 (latest) — 2021-11-12
- 0.1.0-beta.1 (beta) — 2021-03-25
- 0.1.1 — 2021-06-01
- 0.1.0-beta.2 — 2021-05-14
- 0.1.0-beta.0 — 2021-03-24

## README

# WACI Kit React

Render a QR Code or button to [initiate a WACI interaction](https://identity.foundation/wallet-and-credential-interactions/#qr-code-or-link)

- [WACI Kit React](#waci-kit-react)
  - [Installation](#installation)
  - [Usage](#usage)
  - [Props](#props)
    - [QR Props](#qr-props)
    - [Button Props](#button-props)

## Installation

```
npm i @bloomprotocol/waci-kit-react
```

OR

```
yarn add @bloomprotocol/waci-kit-react
```

## Usage

`WACIElement` will render a QR code or button based on the client's platform. By default it will render a button on mobile clients.

```tsx
import { FC } from 'react';
import { WACIElement } from '@bloomprotocol/waci-kit-react';

const MyComp: FC = () => {
  return (
    <WACIElement
      data={{
        challengeTokenUrl:
          'https://example.com/api/v1/waci-challenge/9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d',
        version: '1',
      }}
      buttonProps={{
        size: 'lg',
        type: 'bloom',
      }}
    />
  );
};
```

![QR Example](https://github.com/hellobloom/ssi-sdk/raw/main/packages/waci-kit-react/assets/qr.png)
![Button Example](https://github.com/hellobloom/ssi-sdk/raw/main/packages/waci-kit-react/assets/button.png)

## Props

| Name        | Description                                      | Type                                                                                   |
| ----------- | ------------------------------------------------ | -------------------------------------------------------------------------------------- |
| data        | The data to be rendered in the QR code or button | [See below](#data)                                                                     |
| mode        | Whether to render a QR code or button            | `"qr" \| "button" \| (parsedResult: Bowser.Parser.ParsedResult) => ("qr" \| "button")` |
| qrProps     | Props for the rendered QR code                   | [See below](#qr-props)                                                                 |
| buttonProps | Props for the rendered button                    | [See below](#button-props)                                                             |

### Data

This is the [WACI payload](https://identity.foundation/wallet-and-credential-interactions/#payload).

| Name              | Description                                    | Type     | Required |
| ----------------- | ---------------------------------------------- | -------- | -------- |
| challengeTokenUrl | `GET` endpoint that returns a `challengeToken` | `string` | Yes      |
| version           | The version of the payload                     | `"1"`    | Yes      |

### QR Props

The QR props come from [QR React](https://github.com/hellobloom/qr-react), for more details look [here](https://github.com/hellobloom/qr-react#props).

### Button Props

In addition to the custom props outlined below you can provide any extra `<a>` props.

| Name   | Description                                                                                      | Type                                           | Required |
| ------ | ------------------------------------------------------------------------------------------------ | ---------------------------------------------- | -------- |
| size   | The size of button to render                                                                     | `"lg" \| "md" \| "sm"`                         | Yes      |
| type   | The type of button to render                                                                     | Dependent on `size`, [see below](#button-type) | Yes      |
| invert | Whether the text and background colors should be switched (only applicable when `size === "sm"`) | `boolean`                                      | No       |

```tsx
import { FC } from 'react';
import { WACIElement } from '@bloomprotocol/waci-kit-react';

const MyComp: FC = () => {
  return (
    <WACIElement
      mode="button"
      data={{
        challengeTokenUrl:
          'https://example.com/api/v1/waci-challenge/9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d',
        version: '1',
      }}
      buttonProps={{
        size: 'md',
        type: 'connect',
      }}
    />
  );
};
```

#### Button Type

| Size   | Type                                                        |
| ------ | ----------------------------------------------------------- |
| `"lg"` | `"log-in" \| "sign-up" \| "connect" \| "bloom" \| "verify"` |
| `"md"` | `"log-in" \| "sign-up" \| "connect" \| "bloom" \| "verify"` |
| `"sm"` | `"square" \| "rounded-square" \| "circle" \| "squircle"`    |

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