English | 简体中文
Based on React
, a poster QR code component with Headless Component
feature.
# npm
$ npm i @montagejs/qr-poster --S
# pnpm
$ pnpm add @montagejs/qr-poster --S
params | type | desc | version |
---|---|---|---|
children |
(props: {generatePoster: () => Promise<string>}) => ReactNode | JSX.Element; |
render props function | 1.0.0 |
render |
() => ReactNode | JSX.Element; |
will generate qrPoster‘s dom | 1.0.0 |
h2cOptions |
Options |
will generate qrPoster‘s dom | 1.1.1 |
In common event promotion, it is often necessary to share promotional posters or set up sales signs at the front desk. We hope to further improve the efficiency of business development.
The traditional 'UI' components are difficult to meet the flexible and complex layout of QR code posters, requiring a solution that can adapt to changes.
- Encapsulate core poster generation and storage capabilities;
- Excellent compatibility, meeting the needs of low-end devices with
webview
kernel; Headless
feature;
Online map:Git Mind
import type {FC} from 'react';
import {useEffect, useState} from 'react';
import {QRCodeCanvas} from 'qrcode.react';
import {QrPoster} from '@montagejs/qr-poster';
import './QRCode.demo.less';
function getQRCodePositionByKnownPosition(knownPosition, posterWidth, posterHeight) {
const qrCodeWidth = 248;
const qrCodeHeight = 242;
const qrCodeX = (knownPosition.x / 704) * posterWidth;
const qrCodeY = posterHeight - qrCodeHeight - ((996 - knownPosition.y) / 996) * posterHeight - 242;
return {
x: qrCodeX,
y: qrCodeY,
width: qrCodeWidth,
height: qrCodeHeight,
};
}
const qr = getQRCodePositionByKnownPosition({x: 227, y: 902}, 1406, 1992);
const QRCodeDemo: FC = () => {
const [isReset, setStatus] = useState(false);
return (
<QrPoster render={() => (
<div className='QRCodeWrapper'>
<img src='https://cdn.jsdelivr.net/gh/bigbigDreamer/pic-bed@main/uPic/Poster%201.png' crossOrigin='anonymous' />
<QRCodeCanvas
className='qrcode'
value='www.baidu.com'
size={248 * 2}
imageSettings={{
width: qr.width,
height: qr.height,
}}
style={{
top: qr.y,
left: qr.x,
}}
/>
</div>
)}>
{
({generatePoster}) => {
const [url, setUrl] = useState('');
useEffect(() => {
generatePoster()
.then(url => {
setUrl(url);
});
setStatus(false);
}, []);
return (
(
<>
<div className='demo-wrapper'>
<img src={url} />
</div>
</>
)
);
}
}
</QrPoster>
);
};
QRPoster can not be shipped today without the inspiration and support of various projects in the community. We would like to show our respect to these predecessors:
- html2canvas provided the ability to convert
DOM
into images; - await-to-js provided handle await error way;
- rollup provide construction support;
MIT. Copyright By 不换.