@bloomprotocol/waci-kit-react v0.1.2

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

Data

This is the WACI payload.

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.

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