Polotno Docs
Components

QR Code Side Panel

Lean how to install and customize the QR Code side panel

Installatin

npx shadcn@latest add http://registry.polotno.com:/r/qr-code.json

After installatin you will see a new create file in /src/components/side-panel/qr-code.tsx You can move that file to any other location you want and customize it per your needs.

npx install qr-code @meronex/icons

Copy and paste the following code into your project.

examples/components/side-panel/qr-code.tsx
import React from 'react';import { observer } from 'mobx-react-lite';import { SectionTab } from 'polotno/side-panel';import QRCode from 'qrcode';import * as svg from 'polotno/utils/svg';import FaQrcode from '@meronex/icons/fa/FaQrcode';import { Button, InputGroup } from '@blueprintjs/core';// create svg image for QR code for input textexport async function getQR(text: string) {  return new Promise((resolve) => {    QRCode.toString(      text || 'no-data',      {        type: 'svg',        color: {          dark: '#000', // Blue dots          light: '#fff', // Transparent background        },      },      (err, string) => {        resolve(svg.svgToURL(string));      }    );  });}// define the new custom sectionexport const QrSection = {  name: 'qr',  Tab: (props: any) => (    <SectionTab name="QR code" {...props}>      <FaQrcode />    </SectionTab>  ),  // we need observer to update component automatically on any store changes  Panel: observer(({ store }: { store: any }) => {    const inputRef = React.useRef(null);    return (      <div>        <h3 style={{ marginBottom: '10px', marginTop: '5px' }}>QR code</h3>        <p>Generate QR code with any URL you want.</p>        <InputGroup          placeholder="Paste URL here"          style={{ width: '100%', marginTop: '10px', marginBottom: '10px' }}          inputRef={inputRef}        />        <Button          onClick={async () => {            const src = await getQR(inputRef.current.value);            store.activePage.addElement({              type: 'svg',              name: 'qr',              x: 50,              y: 50,              width: 200,              height: 200,              src,            });          }}          fill          intent="primary"        >          Add new QR code        </Button>      </div>    );  }),};

Usage

import { QrSection } from './side-panel/qr-code'; // make sure to change the path to the correct location
import { SidePanel, DEFAULT_SECTIONS } from 'polotno/side-panel';


const sections = [...DEFAULT_SECTIONS, QrSection];

<SidePanel sections={sections} />

Demo