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';



Prop NameTypeIs RequiredDefault ValueDescription
valuestringrequirednoneSets the value of the QR code

Design guidelines

Some best practice for using QR in your product.
Explain what it is
Let your user know what the QR code represents and what will happen once they scan the QR code. Don't just assume your user is familiar with the pattern of QR codes being used for public addresses.
Your connected account:
Provide an alternative
If you're using a QR code to represent a public address, always give the user the ability to copy/paste the address manually too. They may not want to grant your dapp access to their camera or they may be at a desktop set-up where scanning QR codes is inconvenient.
Your connected account:
Your connected account
  • PublicAddress – Use to show a public address and provide copy-to-clipboard functionality

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.