Installing

npm install oneaccount-react

Quickstart

Import oneaccount-react library in your app.

import OneAccount from 'oneaccount-react'

Usage

<OneAccount
  externalId="{here comes your application id}"
  updateInterval={3 * 60 * 1000} // specify time you want qrcode to update in ms
  floatingMode // use of floatingMode is recommended, use default mode only when you need full customizations
  icons
  title
  authText
  onUpdate={uuid => {
    console.log(uuid) // use this uuid to confirm authentication
  }}
/>

Options

externalId (string, required)

This field is generated automatically when the app is created (please don't change)

color (string) = '#3C444F'

Defines the color of whole library elements

floatingMode (boolean or element) = false

Enables floating mode (disable if you want to customize the library) Please do not use logo element since this functionality might be removed

updateInterval (number, ms) = 3 * 60 * 1000

Interval to update the qr-code

**title (string, element or boolean) = 'Download One account mobile app and scan the qr code or click **the QR code if One account is installed on current device'

Title describes usage of the application. Set to false to remove title or to true to show default title or replace it with any text or element you want.

authText (string, element or boolean)

Text next to floating logo Set to false to remove authText or to true to show default authText or replace it with any text or element you want.

icons (boolean or element)

Icons with links to download the application.

onUpdate (uuid: string)

Fires on every qr-code update and emits new uuid

NOTE: authText, icons and title are only shown when floatingMode is enabled

Another note: there are more props that provide more control over the element, however, they should not be used since the may be removed at any point.

Here are all the props that should be used:

OneAccount.propTypes = {
  externalId: PropTypes.string.isRequired,
  updateInterval: PropTypes.number,
  color: PropTypes.string,
  floatingMode: PropTypes.oneOfType([
    PropTypes.shape({
      logo: PropTypes.element
    }),
    PropTypes.bool
  ]),
  title: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
    PropTypes.bool
  ]),
  authText: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
    PropTypes.bool
  ]),
  icons: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
  onUpdate: PropTypes.func
}