
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
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
The npm package react-qrcode-hook receives a total of 84 weekly downloads. As such, react-qrcode-hook popularity was classified as not popular.
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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.