https://github.com/exoticknight/sseqrcode
react component for qrcode login with Server-Sent Event
https://github.com/exoticknight/sseqrcode
component react server-sent-events sse typescript
Last synced: 3 months ago
JSON representation
react component for qrcode login with Server-Sent Event
- Host: GitHub
- URL: https://github.com/exoticknight/sseqrcode
- Owner: exoticknight
- License: mit
- Created: 2018-03-23T15:06:01.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-08T16:09:38.000Z (about 7 years ago)
- Last Synced: 2025-02-20T22:37:13.019Z (4 months ago)
- Topics: component, react, server-sent-events, sse, typescript
- Language: TypeScript
- Size: 16.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SSEQRCode
a qrcode component for Server-Sent Event.
## Installation
The package can be installed via NPM:
```bash
npm install sseqrcode --save
```
## Basic Concept
SSE: Using server-sent events on [MDN][Using server-sent events].
[Using server-sent events]: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
```
+-------+ +---------+ +---------+
| 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
```javascript
import React from 'react'
import { SSEQRCode } from 'SSEQRCode'
class App extends React.Component {
handleScan = ret => {
alert(`Logged in as ${ret}`)
}
render() {
return (
)
}
}
```
## Props
**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](#onQrcode)|Function| |will be called when qrcodeEvent received
[onPending](#onPending)|Function| |will be called when pendingEvent received
[onScanned](#onScanned)|Function| |will be called when scannedEvent received
[onError](#onError)|Function| |will be called when errorEvent received or error occurred
[onQRCodeLoaded](#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,
```javascript
class Spin extends React.component {
state = {
loading: true,
}
handleLoaded = () => {
this.setState({ loading: false })
}
render() {
return (
)
}
}
```