‏qr-code: وب‌کامپوننتی برای ساخت کد QR

qr-code یه وب‌کامپوننت (Web Component) سبکه که برای ساخت کد QR درست شده و زیر کاپوت از یه نسخه‌ی fork شده‌ی کتابخونه‌ی qr.js استفاده می‌کنه. چون وب‌کامپوننته، مستقل از هر فریمورکیه و هرجا که HTML بنویسی کار می‌کنه.

استفاده‌ش خیلی ساده‌ست: بسته رو import می‌کنی، بعد فقط یه تگ می‌ذاری و متن دلخواهت رو تو ویژگی data می‌نویسی:

<qr-code data="hello world!"></qr-code>

چند تا ویژگی برای تنظیم داره: format که می‌تونه png، html یا svg باشه، modulesize برای اندازه‌ی ماژول‌ها به پیکسل، margin برای حاشیه، و ecclevel برای سطح تصحیح خطا (از L تا H). برای نسخه‌ی HTML می‌تونی واحد CSS دلخواه مثل rem هم بدی.

می‌تونی اسم تگ رو هم خودت عوض کنی و با customElements.define یه اسم دلخواه براش بذاری. برای استایل دادن به عناصر داخل shadow DOM هم از pseudo-element به اسم part استفاده می‌کنی و مثلاً بخش img یا svg یا table رو استایل می‌دی.

تو نسخه‌ی ۲.۰.۰ (خرداد ۲۰۲۶) ثبت custom element برای محیط‌های غیرمرورگری امن‌تر شده، پشتیبانی قدیمی ES5 حذف شده و مرحله‌ی build و باندل dist هم کنار گذاشته شده تا پکیج فقط به‌شکل ESM منتشر بشه.

نکات کلیدی:

• qr-code یه وب‌کامپوننت مستقل از فریمورک برای ساخت کد QR ـه
• با یه تگ و ویژگی data هر متنی رو به QR تبدیل می‌کنه
• خروجی می‌تونه png، svg یا html باشه و سطح تصحیح خطا هم قابل تنظیمه
• با pseudo-element به اسم part می‌شه عناصر داخل shadow DOM رو استایل داد
• نسخه‌ی ۲ فقط ESM ـه و پشتیبانی ES5 و مرحله‌ی build رو حذف کرده