82label
내 서식English시작하기

문서 › 웹 컴포넌트와 프레임워크

React · Vue

@82label/core 를 React·Vue 에서 쓰는 예제.

print() 는 그냥 함수라 어느 프레임워크에서도 그대로 부르면 됩니다. React·Vue 전용 패키지는 준비 중이고, 아래처럼 코어만으로 충분합니다.

React

import { useState } from 'react';
import { print } from '@82label/core';
import template from './labels/product.json';

export function PrintLabelButton({ items }) {
  const [busy, setBusy] = useState(false);
  const onClick = async () => {
    setBusy(true);
    try {
      const rows = items.map((it) => ({ name: it.name, price: it.price, sku: it.sku }));
      const r = await print(template, rows);
      if (r.status === 'pending_permission') alert('출력 프로그램에서 이 사이트를 허용해 주세요.');
    } finally {
      setBusy(false);
    }
  };
  return <button onClick={onClick} disabled={busy}>라벨 인쇄</button>;
}

미리보기 (React)

import { renderToSVG } from '@82label/core';

export function LabelPreview({ template, row }) {
  // renderToSVG 는 모든 값을 이스케이프하므로 그대로 넣어도 안전합니다
  return <div dangerouslySetInnerHTML={{ __html: renderToSVG(template, row) }} />;
}

Vue

<script setup>
import { ref } from 'vue';
import { print } from '@82label/core';
import template from './labels/product.json';

const props = defineProps({ items: Array });
const busy = ref(false);

async function onPrint() {
  busy.value = true;
  try {
    await print(template, props.items.map((it) => ({ name: it.name, price: it.price, sku: it.sku })));
  } finally {
    busy.value = false;
  }
}
</script>

<template>
  <button :disabled="busy" @click="onPrint">라벨 인쇄</button>
</template>

웹 컴포넌트로

<label-82> 는 표준 웹 컴포넌트라 React 19·Vue 3 에서 태그로 써도 됩니다. Vue 는 compilerOptions.isCustomElement 에 label-82 를 알려 주세요.

import { defineLabelElement } from '@82label/core';
import '@82label/core/styles.css';
defineLabelElement();

// React 19
<label-82 template="lbl_a1b2c3d4e5" data={JSON.stringify(rows)} button="인쇄" />