Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
react-qrcodes
Advanced tools
Readme
React hooks for generating QR code.
react-qrcodes is available on npm. It can be installed with the following command:
npm install react-qrcodes --save
react-qrcodes is available on yarn as well. It can be installed with the following command:
yarn add react-qrcodes
import React from 'react';
import { useQRCode } from 'react-qrcodes';
function App() {
const [inputRef] = useQRCode({
text: 'https://github.com/bunlong/react-qrcodes',
options: {
level: 'M',
margin: 7,
scale: 1,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
},
});
return <canvas ref={inputRef} />;
};
export default App;
Prop | Type | Require | Description |
---|---|---|---|
text | string | ✔️ | Text/URL to encode. |
options | options | ❌ | QR code options. |
Prop | Type | Default | Require | Description |
---|---|---|---|---|
level | string | M | ❌ | Correction level. Possible values are low , medium , quartile , high or L , M , Q , H . |
margin | number | 4 | ❌ | Define how much wide the quiet zone should be. |
scale | number | 4 | ❌ | Scale factor. A value of 1 means 1px per modules (black dots). |
width | number | 4 | ❌ | Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over scale . |
color.dark | string | #000000ff | ❌ | Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than color.light . |
color.light | string | #ffffffff | ❌ | Color of light module. Value must be in hex format (RGBA). |
import React from 'react';
import { useQRCode } from 'react-qrcodes';
function App() {
const [inputRef] = useQRCode({
text: 'https://github.com/bunlong/react-qrcodes',
options: {
type: 'image/jpeg',
quality: 0.3,
level: 'M',
margin: 3,
scale: 4,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
},
});
return <img ref={inputRef} />;
};
export default App;
Prop | Type | Require | Description |
---|---|---|---|
text | string | ✔️ | Text/URL to encode. |
options | object | ❌ | QR code options |
Prop | Type | Default | Require | Description |
---|---|---|---|---|
type | string (image/png , image/jpeg , image/webp ) | image/png | ❌ | Image format. |
quality | number | 0.92 | ❌ | A Number between 0 and 1 indicating image quality if the type is image/jpeg or image/webp . |
level | string | M | ❌ | Correction level. Possible values are low , medium , quartile , high or L , M , Q , H . |
margin | number | 4 | ❌ | Define how much wide the quiet zone should be. |
scale | number | 4 | ❌ | Scale factor. A value of 1 means 1px per modules (black dots). |
width | number | 4 | ❌ | Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over scale . |
color.dark | string | #000000ff | ❌ | Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than color.light . |
color.light | string | #ffffffff | ❌ | Color of light module. Value must be in hex format (RGBA). |
If you think any of the react-qrcodes
can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
We'd love to have your helping hand on contributions to react-qrcodes
by forking and sending a pull request!
Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)
How to contribute:
FAQs
React hooks for generating QR code.
We found that react-qrcodes 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.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.