diff --git a/CHANGELOG.md b/CHANGELOG.md index 24b6203..acead1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +## 2.4.0 (2022-11-29) + +### ✨ Features + + * Add SVG + +Credits + +* [@Bunlong](https://github.com/Bunlong) + ## 2.3.0 (2022-11-14) ### ✨ Features diff --git a/README.md b/README.md index 17177a3..10a8958 100644 --- a/README.md +++ b/README.md @@ -8,12 +8,12 @@ React hooks for generating QR code for your next React apps. ## 🎁 Features -* Render Canvas & Image +* Render Canvas, SVG and Image * Support Numeric, Alphanumeric, Kanji and Byte mode * Support Japanese, Chinese, Greek and Cyrillic characters * Support multibyte characters (like emojis smile) - +[Live Demo](https://next-qrcode.js.org) ## 🔧 Install @@ -215,6 +215,128 @@ export default App; +## 💡 SVG + +### Usage + +```js +import React from 'react'; +import { useQRCode } from 'next-qrcode'; + +function App() { + const { SVG } = useQRCode(); + + return ( + + ); +} + +export default App; +``` + +### SVG props + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropTypeRequireDescription
textstring✔️Text/URL to encode.
optionsoptions❌QR code options.
logologo❌QR code options.
+ +### options + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropTypeDefaultRequireDescription
levelstringM❌Correction level. Possible values are low, medium, quartile, high or L, M, Q, H.
marginnumber4❌Define how much wide the quiet zone should be.
scalenumber4❌Scale factor. A value of 1 means 1px per modules (black dots).
widthnumber4❌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.darkstring#000000ff❌Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than color.light.
color.lightstring#ffffffff❌Color of light module. Value must be in hex format (RGBA).
+ ## 💡 Image ### Usage @@ -349,9 +471,9 @@ export default App; ## 📜 Changelog -Latest version 2.3.0 (2022-11-14): +Latest version 2.4.0 (2022-11-29): - * Add logo to canvas + * Add SVG Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/next-qrcode/blob/master/CHANGELOG.md). diff --git a/package.json b/package.json index 546c239..8c3545e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "next-qrcode", - "version": "2.3.0", + "version": "2.4.0", "description": "React hooks for generating QR code for your next React apps.", "author": "Bunlong ", "license": "MIT", diff --git a/src/useQRCode.tsx b/src/useQRCode.tsx index 7f8e166..0abdf72 100644 --- a/src/useQRCode.tsx +++ b/src/useQRCode.tsx @@ -123,12 +123,40 @@ function useCanvasComponent() { return Canvas; } +function useSVGComponent() { + const SVGComponent = ({ + text, + options, + }: IQRCode) => { + const inputRef = React.useRef(null); + + React.useEffect(() => { + QRCode.toString(text, options, function (error: Error, svg: string) { + if (error) { + throw error; + } + if (inputRef.current instanceof HTMLDivElement) { + inputRef.current.innerHTML = svg; + } + }); + }, [text, options]); + + return
; + }; + + const SVG = React.useMemo(() => SVGComponent, []); + + return SVG; +} + export function useQRCode() { const Image = useImageComponent(); const Canvas = useCanvasComponent(); + const SVG = useSVGComponent(); return { Image, Canvas, + SVG, }; } diff --git a/supports/create-next-app/pages/index.tsx b/supports/create-next-app/pages/index.tsx index 033fcf8..0271970 100644 --- a/supports/create-next-app/pages/index.tsx +++ b/supports/create-next-app/pages/index.tsx @@ -2,11 +2,11 @@ import type { NextPage } from 'next' import { useQRCode } from 'next-qrcode' const Home: NextPage = () => { - const { Canvas, Image } = useQRCode() + const { Canvas, Image, SVG } = useQRCode() return ( <> - { y: 0, } }} - /> + /> */} {/* { }, }} /> */} + + ) }