react-thermal-printer

In a Node.js environment, you can print to a network-connected thermal printer (typically using TCP/IP) using the node:net module.

1. Render the receipt to a Uint8Array using render().
2. Use connect() from node:net to establish a connection to the printer's host and port (commonly port 9100).
3. Write the data to the connection by converting the Uint8Array to a Buffer via Buffer.from(data).

import { render, Printer, Text } from 'react-thermal-printer';
import { connect } from 'node:net';

const data = await render(
  <Printer type="epson">
    <Text>Hello World</Text>
  </Printer>
);

const conn = connect({
  host: '192.168.0.99',
  port: 9100,
  timeout: 3000,
}, () => {
  conn.write(Buffer.from(data), () => {
    conn.destroy();
  });
});

In a web environment, you can print to a thermal printer connected via a serial port using the Web Serial API.

1. Render the receipt to a Uint8Array using render().
2. Request a port using window.navigator.serial.requestPort().
3. Open the port with the appropriate baudRate.
4. Get a writer from port.writable and write the Uint8Array data.

import { render, Printer, Text } from 'react-thermal-printer';

const data = await render(
  <Printer type="epson">
    <Text>Hello World</Text>
  </Printer>
);

const port = await window.navigator.serial.requestPort();
await port.open({ baudRate: 9600 });

const writer = port.writable?.getWriter();
if (writer != null) {
  await writer.write(data);
  writer.releaseLock();
}

You can install the package using npm, yarn, or pnpm.

yarn add react-thermal-printer
pnpm add react-thermal-printer
npm install --save react-thermal-printer

You can install react-thermal-printer using your preferred package manager. This library allows you to use React components to generate print commands for thermal printers that support ESC/POS commands.

yarn add react-thermal-printer
pnpm add react-thermal-printer
npm install --save react-thermal-printer

To use the library, define your receipt markup using React components like <Printer>, <Text>, <Row>, and <Line>. Then, use the render function to convert this React element tree into a Uint8Array containing the corresponding ESC/POS commands. This array can then be sent to a printer via a serial port (in the browser) or a network socket (in Node.js).

import { Br, Cut, Line, Printer, Text, Row, render } from 'react-thermal-printer';

const receipt = (
  <Printer type="epson" width={42} characterSet="korea">
    <Text size={{ width: 2, height: 2 }}>9,500원</Text>
    <Text bold={true}>결제 완료</Text>
    <Br />
    <Line />
    <Row left="결제방법" right="체크카드" />
    <Row left="카드번호" right="123456**********" />
    <Line />
    <Text align="center">Wifi: some-wifi / PW: 123123</Text>
    <Cut />
  </Printer>
);

const data: Uint8Array = await render(receipt);

Before running end-to-end tests, you must execute the installation script to prepare the environment.

$ node install.mjs

In a browser environment, you can use the Web Serial API to send the rendered Uint8Array to a connected printer.

import { render, Printer, Text } from 'react-thermal-printer';

const data = await render(
  <Printer type="epson">
    <Text>Hello World</Text>
  </Printer>
);

const port = await window.navigator.serial.requestPort();
await port.open({ baudRate: 9600 });

const writer = port.writable?.getWriter();
if (writer != null) {
  await writer.write(data);
  writer.releaseLock();
}

You can process images before printing by passing an array of transform functions to the transforms prop. This is useful for converting images to formats better suited for thermal printing, such as applying the Floyd-Steinberg dithering algorithm. These transforms are provided by the @react-thermal-printer/image package.

import { transforms } from '@react-thermal-printer/image';

<Image src="https://my-cdn.com/image.png" transforms={[transforms.floydSteinberg]} />

The <Barcode /> component is used to render a barcode for thermal printing. You must provide a type (the barcode symbology) and content (the data to be encoded).

Props

• type: The barcode symbology (e.g., "UPC-A", "CODE39").
• content: The string content to be encoded in the barcode.
• align: The horizontal alignment of the barcode (e.g., "center", "left", "right").

<Barcode type="UPC-A" content="111111111111" />
<Barcode type="CODE39" content="A000$" />
<Barcode align="center" type="UPC-A" content="111111111111" />

The <Raw /> component allows you to print arbitrary binary data directly to the thermal printer. This is useful for sending specific ESC/POS commands or other low-level printer instructions that are not covered by the high-level component API. You must provide the data as a Uint8Array via the data prop.

<Raw data={Uint8Array.from([0x00, 0x01, ...])} />