{"id":27785,"date":"2022-06-22T14:45:51","date_gmt":"2022-06-22T14:45:51","guid":{"rendered":"http:\/\/create-a-business-card-qr-code-in-react"},"modified":"2022-06-22T14:45:51","modified_gmt":"2022-06-22T14:45:51","slug":"create-a-business-card-qr-code-in-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/","title":{"rendered":"Create a Business Card QR Code in React"},"content":{"rendered":"

In recent years, QR codes have become more popular to give out information that used to be printed. Restaurant menus, concert tickets, and even documentation for getting through customs in certain countries have been moved to QR codes. They let us share that info quickly and in a sustainable manner.<\/p>\n

One thing that hasn\u2019t gone away is the business card. LinkedIn profiles are nice, but sometimes having that custom card means a little more depending on the environment. Going to online and in-person conferences could definitely benefit from having business cards available. That\u2019s why we\u2019re going to create a QR code we can let others scan to see our business card. No more ordering hundreds of these and packing them everywhere.<\/p>\n

Some basic setup<\/h2>\n

The first thing we need to do is create the React app we\u2019ll work with. To do that, run the following command:<\/p>\n

$ npx create-react-app qr-card --template typescript\n<\/code><\/span><\/pre>\n
This will bootstrap a new React app for us. Next, you\u2019ll need to install the package we\u2019ll be using to generate the custom QR codes, react-qr-code<\/a>. Run the following command:<\/p>\n
$ npm i react-qr-code\n<\/code><\/span><\/pre>\n
We\u2019ll also be using Material UI<\/a> to style the components we\u2019ll work with so run the following command to install these dependencies:<\/p>\n
$ npm i @mui\/material @emotion\/react @emotion\/styled\n<\/code><\/span><\/pre>\n
This is the only setup we have to do. Let\u2019s jump into the real code.<\/p>\n
Make the business card input<\/h2>\n
Go to the src<\/code> directory and add a new directory called components<\/code>. Inside that folder, add a new file called QrGenerator.tsx<\/code>. This is where we\u2019ll have the form to create a business card based on what users enter and we\u2019ll display the generated QR code.<\/p>\n
Open this new file and add the following code:<\/p>\n
import<\/span> { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> QRCode from<\/span> \"react-qr-code\"<\/span>;\nimport<\/span> Button from<\/span> \"@mui\/material\/Button\"<\/span>;\nimport<\/span> Container from<\/span> \"@mui\/material\/Container\"<\/span>;\nimport<\/span> Stack from<\/span> \"@mui\/material\/Stack\"<\/span>;\nimport<\/span> TextField from<\/span> \"@mui\/material\/TextField\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> QrGenerator<\/span>(<\/span>) <\/span>{\n  const<\/span> [qrValue, setQrValue] = useState(\"placeholding\"<\/span>);\n\n  function<\/span> generateCode<\/span>(e: any<\/span>) <\/span>{\n    e.preventDefault();\n\n    setQrValue(`\n        <div>\n            <p>${e.currentTarget.fullName.value}<\/span><\/p>\n            <p>${e.currentTarget.jobTitle.value}<\/span><\/p>\n            <p>${e.currentTarget.shortDescription.value}<\/span><\/p>\n            <p>${e.currentTarget.website.value}<\/span><\/p>\n        <\/div>\n    `<\/span>);\n  }\n\n  return<\/span> (\n    <Container<\/span>><\/span>\n      <form<\/span>\n        onSubmit<\/span>={(e)<\/span> =><\/span> generateCode(e)}\n        style={{ marginBottom: \"24px\", width: \"800px\" }}\n      >\n        <Stack<\/span> spacing<\/span>={2}<\/span>><\/span>\n          <TextField<\/span>\n            id<\/span>=\"fullName\"<\/span>\n            label<\/span>=\"Full Name\"<\/span>\n            variant<\/span>=\"standard\"<\/span>\n            name<\/span>=\"fullName\"<\/span>\n          \/><\/span>\n          <TextField<\/span>\n            id<\/span>=\"jobTitle\"<\/span>\n            label<\/span>=\"Job Title\"<\/span>\n            variant<\/span>=\"standard\"<\/span>\n            name<\/span>=\"jobTitle\"<\/span>\n          \/><\/span>\n          <TextField<\/span>\n            id<\/span>=\"shortDescription\"<\/span>\n            label<\/span>=\"Short Description\"<\/span>\n            variant<\/span>=\"standard\"<\/span>\n            name<\/span>=\"shortDescription\"<\/span>\n          \/><\/span>\n          <TextField<\/span> id<\/span>=\"email\"<\/span> label<\/span>=\"Email\"<\/span> variant<\/span>=\"standard\"<\/span> name<\/span>=\"email\"<\/span> \/><\/span>\n          <TextField<\/span>\n            id<\/span>=\"website\"<\/span>\n            label<\/span>=\"Website\"<\/span>\n            variant<\/span>=\"standard\"<\/span>\n            name<\/span>=\"website\"<\/span>\n          \/><\/span>\n          <Button<\/span> variant<\/span>=\"contained\"<\/span> type<\/span>=\"submit\"<\/span>><\/span>\n            Generate code\n          <\/Button<\/span>><\/span>\n        <\/Stack<\/span>><\/span>\n      <\/form<\/span>><\/span>\n      <QRCode<\/span> value<\/span>={qrValue}<\/span> style<\/span>={{<\/span> display:<\/span> \"block<\/span>\", margin:<\/span> \"0<\/span> auto<\/span>\" }} \/><\/span>\n    <\/Container<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now let\u2019s discuss what is happening here. First, we import all of the methods and components we need. Next, we define the QrGenerator<\/code> component. Inside of this component, we define a new state that will update the value users will see when they scan the QR code.<\/p>\n
From here, we create the generateCode<\/code> function that takes the input from our business card form and updates the qrValue<\/code> state variable. Next, we dive into the return statement where we render all of the elements.<\/p>\n
We start with the <form><\/code> where we call the generateCode<\/code> function on submission. Then we use MUI to add the fields we need for the form. So we have inputs for a name, job title, short description, email address, and website URL with a submit button at the end. The reason these fields have been chosen is that you might want to showcase different experiences to people when you give them your QR code.<\/p>\n
Finally, we display the code using the QRCode<\/code> component from the package we imported. This takes the state that gets updated with each form submission and displays it to people that scan the code. That\u2019s all we have to do to create this custom QR code on demand! This is great for networking at conferences when you want to say something more memorable on your cards.<\/p>\n
Generate the QR code<\/h2>\n
Now go to the App.tsx<\/code> file and delete all of the boilerplate code. Then add the following code to show the business card form:<\/p>\n
import<\/span> QrGenerator from<\/span> \".\/components\/QrGenerator\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n  return<\/span> <QrGenerator<\/span> \/><\/span><\/span>;\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is how we display our custom component when the app starts up. You can add more formatting to the value that gets displayed or just redirect them to a URL. The main thing is that you can change the QR code value on the fly, giving you some nice flexibility in how you present your business cards to different people.<\/p>\n
\"the<\/p>\n
Conclusion<\/h2>\n
Anything that you used to print off can probably be transformed into a QR code. One thing to keep in mind is that some things do need to be printed off to give the full effect. Sometimes opening a hand-written thank you card is better than receiving a custom animated thank you through a QR code. For many things though, people will likely appreciate not needing to carry more paper or touch more things.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27786,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,246,371],"class_list":["post-27785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nCreate a Business Card QR Code in React<\/title>\n<meta name=\"description\" content=\"Being able to create custom business cards on demand is something nice to have. You can update the information people walk away with so that they know exactly what the conversation was about. That's why we're going to generate custom business card QR codes so that we can do all of this in real-time and impress everyone with our tech skills.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Business Card QR Code in React\" \/>\n<meta property=\"og:description\" content=\"Being able to create custom business cards on demand is something nice to have. You can update the information people walk away with so that they know exactly what the conversation was about. That's why we're going to generate custom business card QR codes so that we can do all of this in real-time and impress everyone with our tech skills.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-22T14:45:51+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create a Business Card QR Code in React\",\"datePublished\":\"2022-06-22T14:45:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/\",\"name\":\"Create a Business Card QR Code in React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA\",\"datePublished\":\"2022-06-22T14:45:51+00:00\",\"description\":\"Being able to create custom business cards on demand is something nice to have. You can update the information people walk away with so that they know exactly what the conversation was about. That's why we're going to generate custom business card QR codes so that we can do all of this in real-time and impress everyone with our tech skills.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA\",\"width\":4000,\"height\":6000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Business Card QR Code in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create a Business Card QR Code in React","description":"Being able to create custom business cards on demand is something nice to have. You can update the information people walk away with so that they know exactly what the conversation was about. That's why we're going to generate custom business card QR codes so that we can do all of this in real-time and impress everyone with our tech skills.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/","og_locale":"en_US","og_type":"article","og_title":"Create a Business Card QR Code in React","og_description":"Being able to create custom business cards on demand is something nice to have. You can update the information people walk away with so that they know exactly what the conversation was about. That's why we're going to generate custom business card QR codes so that we can do all of this in real-time and impress everyone with our tech skills.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-22T14:45:51+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/"},"author":{"name":"","@id":""},"headline":"Create a Business Card QR Code in React","datePublished":"2022-06-22T14:45:51+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA","keywords":["Guest Post","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/","name":"Create a Business Card QR Code in React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA","datePublished":"2022-06-22T14:45:51+00:00","description":"Being able to create custom business cards on demand is something nice to have. You can update the information people walk away with so that they know exactly what the conversation was about. That's why we're going to generate custom business card QR codes so that we can do all of this in real-time and impress everyone with our tech skills.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA","width":4000,"height":6000},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-business-card-qr-code-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Business Card QR Code in React"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926284\/Web_Assets\/blog\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5\/b5407113b8e8a434ebd359deee9081d85be70bfa-4000x6000-1_277868d1d5.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27785"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27785\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27786"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Finished code<\/h2>\n
You can check out all of the code in the qr-card<\/code> folder of this repo<\/a>. You can also check out the app in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201cyouthful-nightingale-9cj5i9\u201d\nid=\u201cyouthful-nightingale-9cj5i9\u201d\n\/><\/p>\n