React hook for creating QR Code data urls
yarn add react-qrcode-hook
or
npm install --save react-qrcode-hook
This hook returns a data URL which can be added as the source to an image. The only parameter to the hook function requires is the string you want to codify.
import useQrCode from "react-qrcode-hook"; function App() { const qrCode = useQrCode("Hello There"); return ( <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }} > <img alt="qr code" src={qrCode} /> </div> ); }
This will produce a QR Code as follows.
You can also pass an options object as a second parameter to the hook as follows.
You can see a complete list of options here.
const qrCode = useQrCode(text, options);
And here is some sample code that uses options.
const options = { margin: 5, scale: 10, color: { dark: '#ffffff', light: '#000099', }, }; function App() { const qrCode = useQrCode('https://americanexpress.io', options); return ( <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }} > <img alt="qr code" src={qrCode} /> </div> ); }
The code above produces this QR Code. Notice how it changed the colors, size, and padding of the image?
In the project folder:
yarn yarn example
or
npm install npm run example
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!