Encode Google Calendar Invites in Next.js

Encoding is changing data into a new format using a scheme. It is reversible, and data can be encoded to a new form and decoded to its original condition.

Encoding should not be confused with encryption, which hides content. Both techniques are used extensively in the networking, software programming, wireless communication, and storage fields.

In this post, we’ll learn how to encode Google event invitations in a Next.js application using qrcode.react library.

Sandbox

We completed this project in a CodeSandbox. Fork and run it to quickly get started.

GitHub Repository

https://github.com/Kizmelvin/encoding-with-qrcode-react-in-next.js

Prerequisites

This post requires the following:

Knowledge of JavaScript and React.js
Installation of Node.js on the local machine
Experience with Next.js is not a requirement but is good to have
Basic understanding of styling with Bootstrap

Overview

Google Calendar is a time-management and scheduling calendar service developed by Google. It allows users to create and edit events, set reminders, add event locations, invite other users to events, etc.

Next.js is an open-source web development framework built on Node.js, enabling React-based web application functionalities such as server-side rendering and generating static websites.

qrcode.react is a React component used to generate QR (Quick Response) codes that render in the DOM for React applications. The generated QR codes are suited for printing and on-screen scanning.

The qrcode.react exports three components, supporting rendering as SVG or Canvas. SVG is recommended because of its flexibility, but Canvas may be preferable.

Setting up and Installations

We will run the following command in the terminal to create a new Next.js application:

1npx create-next-app encode-events

The above command creates a starter Next.js application in the encode-events folder.

Next, navigate into the project directory with the following command:

1cd encode-events

Next, we'll install the following npm packages: qrcode.react - so we can easily use the component in a React environment and react-bootstrap and Bootstrap to add styling to the application.

The following command will install the above packages:

1npm install qrcode.react react-bootstrap bootstrap

Next, run the below command to start the application:

1npm run dev # to start the dev server

Next.js will start a live development server at http://localhost:3000.

Building the Application

First, create a Components folder and create a Qrcode.js file with the following snippets:

1//Components/Qrcode.js
2import React, { useRef } from "react";
3import { QRCodeSVG } from "qrcode.react";
4import { Button } from "react-bootstrap";
5function Qrcode({ value, size }) {
6  const codeRef = useRef(null);
7  return (
8    <div ref={codeRef} style={{ display: "flex", flexDirection: "column" }}>
9      <QRCodeSVG size={size} value={value} />
10      <Button className="mt-3 p-2" variant="primary" onClick={handleSave}>
11        Save SVG
12      </Button>
13    </div>
14  );
15}
16export default Qrcode;

Here, we:

Imported useRef hook from react, QRCodeSVG component from qrcode.react, and Button component from react-bootstrap
Created codeRef constant with the useRef hook to target the element we want to save
Rendered the QRCodeSVG component with some props and implemented a button to save the SVG

Notice we called a handleSave() function we haven't defined; let's define it below:

1//Components/Qrcode.js
2//Imports here
3function Qrcode({ value, size }) {
4  const codeRef = useRef(null);
5  
6const handleSave = () => {
7    const preface = '<?xml version="1.0" standalone="no"?>\r\n';
8    const element = codeRef.current.children[0].outerHTML;
9    const svgBlob = new Blob([preface, element], {
10      type: "image/svg+xml;charset=utf-8",
11    });
12    const svgUrl = URL.createObjectURL(svgBlob);
13    const downloadLink = document.createElement("a");
14    downloadLink.href = svgUrl;
15    downloadLink.download = "qrcode.svg";
16    document.body.appendChild(downloadLink);
17    downloadLink.click();
18    document.body.removeChild(downloadLink);
19  };
20  //return() function here
21}
22export default Qrcode;

Next, import the Qrcode.js component and render it inside index.js:

1//pages/index.js
2import "bootstrap/dist/css/bootstrap.min.css";
3import Qrcode from "../Components/Qrcode";
4
5export default function Home() {
6
7  const GoogleEventURL =
8    "https://calendar.google.com/event?action=TEMPLATE&tmeid=NXVkN2hzZWYwcDdzb2d1YTU1NzAwaTlxZWkgY2hpZGkuZXplMDAyQG0&tmsrc=chidi.eze002%40gmail.com";
9
10  return (
11    <div className=" bg-danger">
12      <h1 className="p-3 text-center text-light">Welcome on Board!</h1>
13      <main
14        style={{
15          display: "flex",
16          justifyContent: "space-evenly",
17          alignItems: "center",
18          padding: "2rem"
19        }}
20      >
21        <div>
22          <h4 className="mt-5 fs-1 text-center text-light">
23            Scan to Book a Spot.
24          </h4>
25          <h5 className="mt-2 fs-3 text-center text-light">
26            {" "}
27            <i>Save and Share</i>{" "}
28          </h5>
29        </div>
30        <div>
31          <Qrcode value={GoogleEventURL} size={300} />
32        </div>
33      </main>
34    </div>
35  );
36}

In the snippets above, we:

Imported Qrcode from Components folder and saved a google calendar event as GoogleEventURL
Rendered the Qrcode component and passed GoogleEventURL as props to it

Back in the browser, the application will look like the one below:

Now, users can scan the code and save the invitation.

Conclusion

This article discussed transforming Google event URLs into QR codes and integrating QR codes in web applications.

Resources

The following resource might be helpful: