a qrcode component for Server-Sent Event.
The package can be installed via NPM:
npm install sseqrcode --save
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 |-| |
| |-----------| | |
| | |
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>
)
}
}
prop | type | required | description |
---|---|---|---|
sseSource | EventSource | when sseURL is null | provided EventSource |
sseURL | string | when sseSource is null | URL of the source |
width | number or string | width property on img tag, default 200 | |
height | number or string | height property on img tag, default 200 | |
keepAlive | boolean | whether to close connection after qrcodeEvent was received, default false | |
errorEvent | string | name of error event, default 'error' | |
pendingEvent | string | name of pending event, default 'pending' | |
scannedEvent | string | name of scanned event, default 'scanned' | |
qrcodeEvent | string | name of qrcode event, default 'qrcode' | |
onInit | Function | will be called when EventSource is opened | |
onQrcode | Function | will be called when qrcodeEvent received | |
onPending | Function | will be called when pendingEvent received | |
onScanned | Function | will be called when scannedEvent received | |
onError | Function | will be called when errorEvent received or error occurred | |
onQRCodeLoaded | Function | will be called when QRCode image is loaded |
function onQrcode(data)
where:
data
- string the received message from server, should be base64 or URL of QRCode image
function onPending(data)
where:
data
- string the received message from server
function onScanned(data)
where:
data
- string the received message from server, can be used for notification
function onError(data)
where:
data
- string the received message from server or the error message
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>
)
}
}