React QRCode Hook
📸
![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)
React hook for creating QR Code data urls
![Edit useReact hook](https://codesandbox.io/static/img/play-codesandbox.svg)
Install
yarn add react-qrcode-hook
or
npm install --save react-qrcode-hook
Usage
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.
Advanced
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?
Example
In the project folder:
yarn
yarn example
or
npm install
npm run example
Contributors
Thanks goes to these wonderful people
(emoji key):
This project follows the
all-contributors
specification. Contributions of any kind welcome!