Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
react-qrcode-hook
Advanced tools
React QRCode Hook
📸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):
Alex 💻 | Donavon West 💻 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
React hook for creating QR Code data urls
We found that react-qrcode-hook demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.