{"id":27850,"date":"2022-03-24T19:56:16","date_gmt":"2022-03-24T19:56:16","guid":{"rendered":"http:\/\/generate-qr-code-for-social-media-profiles"},"modified":"2022-03-24T19:56:16","modified_gmt":"2022-03-24T19:56:16","slug":"generate-qr-code-for-social-media-profiles","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-qr-code-for-social-media-profiles\/","title":{"rendered":"Generate QR Code for Social Media Profiles"},"content":{"rendered":"

QR (quick response) codes are a popular type of two-dimensional or matrix barcode that allows you to easily encode information in the form of machine-readable images. These images can be used anywhere, from websites and mobile apps to banners, brochures, flyers, and business cards. Its popularity and effectiveness can be attributed to several factors, including the ease with which it can be scanned from any angle with a simple camera the high level of data integrity it provides even when parts of the QR Code are damaged or dirty.<\/p>\n

The widespread use of QR codes has resulted in the development of several free and paid platforms for generating and scanning them. In this article, we will build a QR code generator that will encode alphanumeric data representing social media links. After that, we will add two additional features. The first is the ability to download the image locally. The second is to upload the resulting image to Cloudinary and receive a shareable URL that can be copied to the clipboard. This should be fun!<\/p>\n

Here is a link<\/a> to the demo on CodeSandbox.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Project Setup<\/h2>\n

Run this command in your terminal to create a simple React application:<\/p>\n

    npx create-react-app qr-code-generator\n<\/code><\/span><\/pre>\n
Next, run the following command in your terminal to install the dependencies we\u2019ll need for this project:<\/p>\n
    npm<\/span> i<\/span> qrcode<\/span>.react<\/span> react-dropzone<\/span> axios<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
The qrcode.react<\/code> module will generate the QR code. The react-dropzone<\/code> module will be used to add Drag and drop functionality for the images embedded on the QR code, while the **axios**<\/code> module will be the HTTP client.<\/p>\n
We\u2019ll also need to create a separate component (file picker) to handle the drag-and-drop for the images that will be embedded in our QR code. Run the following command at the root of your project to create a folder named components<\/code> and a file inside called ImagePicker.js<\/code>:<\/p>\n
    mkdir<\/span> components<\/span>\n    cd<\/span> components<\/span>\n    touch<\/span> ImagePicker<\/span>.js<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Render the Qr Code<\/h2>\n
Add the following to your App.js<\/code> file:<\/p>\n
    import '.\/styles.css';\n    import { useState } from 'react';\n    import QrCode from 'qrcode.react';\n    export default function App() {\n      const [input, setInput] = useState('');\n      const uploadToCloudinary = async () => {};\n      const downloadImage = async () => {};\n      return (\n        <main<\/span> className<\/span>=\"App\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"form_group norm container\"<\/span>><\/span>\n            <label<\/span>><\/span>Add link to social media profile<\/label<\/span>><\/span>\n            <input<\/span>\n              type<\/span>=\"url\"<\/span>\n              value<\/span>={input}<\/span>\n              onChange<\/span>={(e)<\/span> =><\/span> setInput(e.target.value)}\n            \/>\n          <\/div<\/span>><\/span>\n          {input && (\n            <><\/span>\n              <div<\/span>><\/span>\n                <QrCode<\/span> value<\/span>={input}<\/span> size<\/span>={400}<\/span> level<\/span>=\"M\"<\/span> includeMargin<\/span> \/><\/span>\n              <\/div<\/span>><\/span>\n            <\/><\/span>\n          )}\n        <\/main<\/span>><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In this component, we begin with some CSS, then some React hooks, and finally the QrCode<\/code> component. We define a state variable called input<\/code> in our App<\/code> component, which will hold the URL of a random social media profile; this is followed by two other functions, downloadImage<\/code> and uploadToCloudinary<\/code>, which we will discuss later. Our App<\/code> component renders several things; the first is an input field that updates the state variable with data provided by the user. We also conditionally render the QrCode<\/code> component based on the availability of the user input, and it accepts the following props:<\/p>\n