QR
On this page
QR
Use the QR component to renders a QR code for a provided string. Can be used as a shortcut to input a public Ethereum address or link to a specific website.
Import component
import { QR } from 'rimble-ui';
Example
Setting custom size by pixels
Setting custom size by percent
Props
bgColor
string
(optional)
Sets the background color
Default value:
'#FFFFFF'
fgColor
string
(optional)
Sets the foreground color
Default value:
'#000000'
includeMargin
bool
(optional)
Adds margin around the QR code
Default value:
false
level
enum
(optional)
Sets the amount of error correction
Allowed values: 'L' 'M' 'Q' 'H' .
Default value:
'L'
renderAs
enum
(optional)
Changes the element that contains the QR code
Allowed values: 'canvas' 'svg' .
Default value:
'svg'
size
number
(optional)
Sets the height and width in pixels
Default value:
128
value
string
(required)
Sets the value of the QR code
The QR component uses react.qrcode to generate the QR code from the value prop.
Design guidelines
Some best practice for using QR in your product.
Explain what it is
Do
Let your user know what the QR code represents and what will happen once they scan the QR code.
Your account
Scan with a mobile wallet to send funds to this address
Don't
Don't just assume your user is familiar with the pattern of QR codes being used for public addresses.
Provide an alternative
Do
If you're using a QR code to represent an Ethereum address, consider giving the user the ability to copy/paste the address manually too.
Your account
Scan with a mobile wallet to send funds to this address
Don't
Don't just provide a QR code to represent an Ethereum address. A user may not want to give their wallet access to their camera or may be at a desktop setup where scanning QR codes is inconvenient.
Your account
Scan with a mobile wallet to send funds to this address
Related components
- EthAddress – Use to show a public address and provide copy-to-clipboard functionality
