react-qrcode-hook
v1.1.0
React hook for creating QR Code data urls
0/weekUpdated 3 years agoMITUnpacked: 6.0 KB
Published by Alex Anderson
npm install react-qrcode-hookReact QRCode Hook 📸
> React hook for creating QR Code data urls
Install
``sh`
yarn add react-qrcode-hook
or
`sh`
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.
`js
import useQrCode from "react-qrcode-hook";
function App() {
const qrCode = useQrCode("Hello There");
return (
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
);
}
`
This will produce a QR Code as follows.
Advanced
You can also pass an
object as a second parameter to the hook as follows.
You can see a complete list of options here.`js
const qrCode = useQrCode(text, options);
`And here is some sample code that uses
.
`js
const options = {
margin: 5,
scale: 10,
color: {
dark: '#ffffff',
light: '#000099',
},
};function App() {
const qrCode = useQrCode('https://americanexpress.io', options);
return (
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
);
}
`
The code above produces this QR Code. Notice how it changed the colors, size, and padding of the image?
Example
In the project folder:
sh
yarn
yarn example
`or
sh
npm install
npm run example
``Contributors
Thanks goes to these wonderful people
(emoji key):
 Alex 💻 |  Donavon West 💻 📖 |
This project follows the
all-contributors
specification. Contributions of any kind welcome!