A single react function component can place an image like a QR code in a HTML5 canvas tag.
Screenshot
QRCode function component example
Here's how to do this without Kubernetes. This example is just JavaScript.
Example JavaScript:
const QRCode = ({text, size}) => {
const canvas = useRef(null);
useEffect(() => {
if (canvas != null && canvas.current != null) {
let qr = new QRious({
element: canvas.current,
value: text,
size: size
});
}
});
return(<canvas ref={canvas}></canvas>);
}
Props
QRCode is a function component. QRCode accepts two props.
- text
- size
The generated QR code image encodes the text. Size controls the image size.
React hooks in this function component
The function component uses exactly two hooks:
useRefuseEffect
useRef() is an essential react hook. It's almost impossible for a React function component to draw on an HTML5 <canvas> without this hook.
useEffect() helps the function component by listening to React component lifecycle events.
Dependencies
Include the cdn hosted versions as <script/> tags:
unpkg is reliable. I love it. cdnjs is unstoppable! I love it too. Thanks Cloudflare!
Example
A single html file example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>QRCode with React Hooks and JS</title>
<meta charset="utf-8" />
<meta name="description" content="QRCode with React Hooks and JS.">
<meta name="keywords" content="JavaScript, React">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/qrious@latest/dist/qrious.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// React Hooks
const {
useRef,
useEffect
} = React;
// QRCode
//
// Function component, creates one QR code image
const QRCode = ({text, size}) => {
const canvas = useRef(null);
useEffect(() => {
if (canvas != null && canvas.current != null) {
let qr = new QRious({
element: canvas.current,
value: text,
size: size
});
}
});
return(<canvas ref={canvas}></canvas>);
}
// App
//
const App = () => {
const text = "https://dev.to";
return(<div align="center">
<h1>One QRCode</h1>
<QRCode text={text} size="100"/>
<p>{text}</p>
</div>);
}
ReactDOM.render(
<App />,
document.querySelector('#root'),
);
</script>
</body>
</html>
Just one way
There are dozens of ways to generate a single QR code image. I'm writing down a list. Please feel free to share the best libraries as a comment.
Top comments (0)