sseqrcode v0.0.6

SSEQRCode

a qrcode component for Server-Sent Event.

Installation

The package can be installed via NPM:

npm install sseqrcode --save

Basic Concept

SSE: Using server-sent events on MDN.

                +-------+                  +---------+                         +---------+
                | user  |                  | browser |                         | server  |
                +-------+                  +---------+                         +---------+
                    |                           |                                   |
                    |                           | request login                     |
                    |                           |---------------------------------->|
                    |                ---------\ |                                   |
                    |                | onInit |-|                                   |
                    |                |--------| |                                   |
                    |                           |                                   |
                    |                           |        send('qrcode', base64/url) |
                    |                           |<----------------------------------|
                    |              -----------\ |                                   |
                    |              | onQrcode |-|                                   |
                    |              |----------| |                                   |
                    |                           |                                   |
                    |      present QRCode image |                                   |
                    |<--------------------------|                                   |
                    |                           |                                   |
                    |                           |        send('pending', 'pending') |
                    |                           |<----------------------------------|
                    |             ------------\ |                                   |
                    |             | onPending |-|                                   |
                    |             |-----------| |                                   |
------------------\ |                           |                                   |
| scan the QRCode |-|                           |                                   |
|-----------------| |                           |                                   |
                    |                           |                                   |
                    | access the login url      |                                   |
                    |-------------------------------------------------------------->|
                    |                           |                                   |
                    |                           |      send('scanned', 'logged in') |
                    |                           |<----------------------------------|
                    |             ------------\ |                                   |
                    |             | onScanned |-|                                   |
                    |             |-----------| |                                   |
                    |                           |                                   |

Usage

import React from 'react'
import { SSEQRCode } from 'SSEQRCode'

class App extends React.Component {
  handleScan = ret => {
    alert(`Logged in as ${ret}`)
  }

  render() {
    return (
      <div>
        <SSEQRCode
          sseURL='/api/sse'
          onScanned={this.handleScan} />
      </div>
    )
  }
}

Props

onQrcode

function onQrcode(data)

where:

• data - string the received message from server, should be base64 or URL of QRCode image

onPending

function onPending(data)

where:

• data - string the received message from server

onScanned

function onScanned(data)

where:

• data - string the received message from server, can be used for notification

onError

function onError(data)

where:

• data - string the received message from server or the error message

onQRCodeLoaded

function onQRCodeLoaded()

you can use this prop to control loading indicator.

For example,

class Spin extends React.component {
  state = {
    loading: true,
  }

  handleLoaded = () => {
    this.setState({ loading: false })
  }

  render() {
    return (
      <div style={{ border: `1px solid ${this.state.loading ? 'grey' : 'red'}` }}>
        <SSEQRCode
          sseURL="/api/sse"
          onQRCodeLoaded={this.handleLoaded} />
      </div>
    )
  }
}