qrbar-react-pack

کامپوننت اسکنر QR و بارکد برای React/Next با API بومی BarcodeDetector. بدون وابستگی دیکودر خارجی، با کپی خودکار نتیجه به کلیپ‌بورد و Toast فارسی.

نصب

npm i qrbar-react-pack react-hot-toast

استفاده در Next.js

'use client';
import dynamic from 'next/dynamic';
import { Toaster } from 'react-hot-toast';
import { QRBarcodeScanner } from 'qrbar-react-pack';

const Scanner = dynamic(async () => (await import('qrbar-react-pack')).QRBarcodeScanner as any, { ssr: false });

export default function Page() {
  return (
    <div style={{ minHeight: '100vh', background: '#0a0a0a', color: '#e5e5e5', padding: 24, display: 'grid', placeItems: 'center' }}>
      <Toaster />
      <div style={{ width: '100%', maxWidth: 420 }}>
        <Scanner
          onDetected={(res) => console.log('RESULT', res)}
          onError={(e) => console.error(e)}
          facingMode="environment"
          qrStyle={{ borderColor: '#3b82f6' }}
          barcodeStyle={{ borderColor: '#10b981' }}
          showTorchButton
          copyToClipboard
          copyToastText="کپی شد"
        />
      </div>
    </div>
  );
}

پراپ‌ها

| نام | نوع | پیش‌فرض | توضیح | |---|---|---|---| | onDetected | (result) => void | undefined | کال‌بک هنگام تشخیص | | onError | (err) => void | undefined | گزارش خطا | | className | string | undefined | کلاس‌های اضافی کانتینر | | paused | boolean | false | توقف موقت اسکن | | scanIntervalMs | number | 120 | فاصله‌ی اسکن | | formats | BarcodeFormat[] | مجموعهٔ متداول | فرمت‌های مجاز | | facingMode | 'environment'|'user' | 'environment' | انتخاب دوربین | | constraints | MediaTrackConstraints | undefined | محدودیت‌های اضافی | | qrStyle | OverlayStyle | آبی | استایل QR | | barcodeStyle | OverlayStyle | سبز | استایل بارکد | | showTorchButton | boolean | true | دکمهٔ فلش در صورت پشتیبانی | | torchLabel | string | 'روشنایی' | برچسب فلش | | unsupportedFallback | ReactNode | پیام پیش‌فرض | جایگزین برای عدم پشتیبانی | | fallbackDecoder | (ImageBitmap|ImageData)=>Promise<ScanResult|null> | undefined | دیکودر جایگزین سفارشی | | copyToClipboard | boolean | true | کپی خودکار مقدار | | copyToastText | string | 'کپی شد' | متن Toast |

ساخت

npm run build

نکات

• HTTPS و مجوز دوربین لازم است.
• اگر BarcodeDetector در مرورگر کاربر پشتیبانی نشود، از fallbackDecoder استفاده کنید.
• برای نمایش Toast باید react-hot-toast نصب و Toaster در ریشهٔ UI قرار گیرد.

لایسنس

MIT