diff options
Diffstat (limited to 'packages/merchant-backend-ui/src/components/QR.tsx')
-rw-r--r-- | packages/merchant-backend-ui/src/components/QR.tsx | 49 |
1 files changed, 31 insertions, 18 deletions
diff --git a/packages/merchant-backend-ui/src/components/QR.tsx b/packages/merchant-backend-ui/src/components/QR.tsx index 29c9920bf..425a94961 100644 --- a/packages/merchant-backend-ui/src/components/QR.tsx +++ b/packages/merchant-backend-ui/src/components/QR.tsx @@ -14,28 +14,41 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - import { h, VNode } from "preact"; - import { useEffect, useRef } from "preact/hooks"; - import qrcode from "qrcode-generator"; - -export function createSVG(text:string):string { - const qr = qrcode(0, 'L'); +import { h, VNode } from "preact"; +import { useEffect, useRef } from "preact/hooks"; +import qrcode from "qrcode-generator"; + +export function createSVG(text: string): string { + const qr = qrcode(0, "L"); qr.addData(text); qr.make(); return qr.createSvgTag({ scalable: true, - margin: 0 + margin: 0, }); } - export function QR({ text }: { text: string; }):VNode { - const divRef = useRef<HTMLDivElement>(null); - useEffect(() => { - divRef.current.innerHTML = createSVG(text) - }); - - return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}> - <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef} /> - </div>; - } -
\ No newline at end of file +export function QR({ text }: { text: string }): VNode { + const divRef = useRef<HTMLDivElement>(null); + useEffect(() => { + if (divRef.current) { + divRef.current.innerHTML = createSVG(text); + } + }); + + return ( + <div + style={{ + width: "100%", + display: "flex", + flexDirection: "column", + alignItems: "center", + }} + > + <div + style={{ width: "50%", minWidth: 200, maxWidth: 300 }} + ref={divRef} + /> + </div> + ); +} |