DEV Community

Olatunji Ayodele Abidemi
Olatunji Ayodele Abidemi

Posted on

2

You can create a QR code for the website URL

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:

  1. Installation:

    • First, install the react-qr-code package by running the following command in your project directory:
     npm i react-qr-code
    
  • 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
    
  1. 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"));
    
  • 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>
    
  1. 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>
    
  2. 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

Remember to replace "https://www.npmjs.com/package/react-qr-code" with your desired URL.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook