You can create a QR code for the website URL "https://www.npmjs.com/package/react-qr-code" using the react-qr-code
library. This library provides a simple and efficient way to generate QR codes in React applications. Here's how you can use it:
-
Installation:
- First, install the
react-qr-code
package by running the following command in your project directory:
npm i react-qr-code
- First, install the
-
If you're using React Native, you'll also need to have
react-native-svg
installed. Run:
npm i react-native-svg cd ios && pod install
-
Usage:
- Import the
QRCode
component from the library:
import React from "react"; import QRCode from "react-qr-code"; // Render the QR code with a specific value (e.g., a URL) ReactDOM.render(<QRCode value="https://www.npmjs.com/package/react-qr-code" />, document.getElementById("Container"));
- Import the
-
Note: If the QR code is likely to appear next to dark objects, wrap it in a light-colored container to preserve the "quiet zone":
<div style={{ background: "white", padding: "16px" }}> <QRCode value="https://www.npmjs.com/package/react-qr-code" /> </div>
-
Responsive QR Code Example:
- You can adjust the QR code size and styling as needed. For example:
<div style={{ height: "auto", margin: "0 auto", maxWidth: 64, width: "100%" }}> <QRCode size={256} style={{ height: "auto", maxWidth: "100%", width: "100%" }} value="https://www.npmjs.com/package/react-qr-code" viewBox="0 0 256 256" /> </div>
-
API Props:
- You can customize the QR code using the following props:
-
bgColor
: Background color (default: "#FFFFFF") -
fgColor
: Foreground color (default: "#000000") -
level
: Error correction level ("L", "M", "Q", or "H") -
size
: QR code size (default: 256) -
title
: Optional title -
value
: The URL or text to encode
-
- You can customize the QR code using the following props:
Remember to replace "https://www.npmjs.com/package/react-qr-code"
with your desired URL.
Top comments (0)