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.
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} />