A React component for rendering ZPL (Zebra Programming Language) labels using zpl-js.
npm install react-zpl-rendererRender ZPL label codes as canvas.
This builds on top of the amazing zpl-js library and offers a simplified component to just get raw ZPL code rendered onto your page. This repacks and internalizes zpl-js to simplify the usage even further.
``bash`
npm install react-zpl-rendereror
yarn add react-zpl-renderer
`tsx
import ZplRenderer from 'react-zpl-renderer';
function MyComponent() {
const zplCode =
^XA
^FO20,20^A0N,25,25^FDHello World^FS
^XZ
;
return
}
`
- zpl (string): The ZPL code to renderwidth
- (number): Canvas width in pixels (default: 400)height
- (number): Canvas height in pixels (default: 600)data-component
- (string): Data attribute for testing (default: "ZplRenderer")
- All other canvas HTML attributes are supported
This library works with Next.js out of the box. For canvas-based components like this one, it's recommended to disable SSR:
`tsx
import dynamic from 'next/dynamic';
const ZplRenderer = dynamic(() => import('react-zpl-renderer'), {
ssr: false,
});
function MyComponent() {
const zplCode =
^XA
^FO20,20^A0N,25,25^FDHello World^FS
^XZ
;
return
}
``
!demo