How Pros add QR code to their sites 😎✨

Love them or hate them, the cool kids around the block use them. If you want to develop an app that relies on sharing stuff, QR codes are a great tool to get users hooked.

But it feels too difficult to implement

Fret not my friend, this article will guide you through such an easy solution, that you can do it, with your eyes closed (metaphorically speaking, of course).

Let’s get started!

Dependencies

There are a lot of libraries that can be used to generate the QR codes. My personal favorite is qrcode, which I would be using in this article.

Install the package using:

npm i qrcode

Setting up the component

We would start off with a basic component with a text input field as we need some input data to generate the QR code.

import { useState } from "react";
export default function App() {
  const [text, setText] = useState("");
  return (
    <div>
      <input
        value={text}
        onChange={(e) =>…