WACI Kit React

Render a QR Code or button to initiate a WACI interaction

• WACI Kit React
  • Installation
  • Usage
  • Props
    • QR 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.

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',
      }}
    />
  );
};

Props

| Name | Description | Type | | ----------- | ------------------------------------------------ | -------------------------------------------------------------------------------------- | | data | The data to be rendered in the QR code or button | See below | | 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 | | buttonProps | Props for the rendered button | See below |

Data

This is the WACI 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, for more details look here.

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 | Yes | | invert | Whether the text and background colors should be switched (only applicable when size === "sm") | boolean | No |

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