QR Code Side Panel

Installatin

npx shadcn@latest add http://registry.polotno.com:/r/qr-code.json --path ./src/components/side-panel/qr-code.tsx

After installatin you will see a new create file in /src/components/side-panel/qr-code.tsx. You can change setup location as you want.

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 text
export 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 section
export 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>
    );
  }),
};

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

/App.js

import React from 'react';
import { PolotnoContainer, SidePanelWrap, WorkspaceWrap } from 'polotno';
import { Workspace } from 'polotno/canvas/workspace';
import { SidePanel, DEFAULT_SECTIONS } from 'polotno/side-panel';
import { Toolbar } from 'polotno/toolbar/toolbar';
import { ZoomButtons } from 'polotno/toolbar/zoom-buttons';
import { createStore } from 'polotno/model/store';
import { QrSection } from './side-panel/qr-code';
import '@blueprintjs/core/lib/css/blueprint.css';

const store = createStore({
key: 'nFA5H9elEytDyPyvKL7T',
});

// Add a default template
store.addPage();

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

export default function App() {
return (
  <PolotnoContainer style={{ width: '100vw', height: '100vh' }}>
    <SidePanelWrap>
      <SidePanel store={store} sections={sections} defaultSection="qr" />
    </SidePanelWrap>
    <WorkspaceWrap>
      <Toolbar store={store} downloadButtonEnabled />
      <Workspace store={store} />
      <ZoomButtons store={store} />
    </WorkspaceWrap>
  </PolotnoContainer>
);
}

Installatin

Usage

Demo

On this page