Giter VIP home page Giter VIP logo

react-native-esc-pos's Introduction

React Native ESC/POS module

A React Native ESC/POS module to help you connect to your ESC/POS printer easily. It also has provide an intuitive way to design your layout, check below example to see how easy to get your layout ready!

Getting started

$ npm install git+https://github.com/usenbekov/react-native-esc-pos --save

** NOTE: Skip below installation guide if you are using React Native >= 0.60 **

Mostly automatic installation

$ react-native link @leesiongchan/react-native-esc-pos

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modules@leesiongchanreact-native-esc-pos and add EscPos.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libEscPos.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)

Android

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import leesiongchan.reactnativeescpos.EscPosPackage; to the imports at the top of the file
  • Add new EscPosPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-esc-pos'
    project(':react-native-esc-pos').projectDir = new File(rootProject.projectDir, 	'../node_modules/@leesiongchan/react-native-esc-pos/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-esc-pos')
    

Usage

import EscPos from "@leesiongchan/react-native-esc-pos";

const design = `
D0004           {<>}           Table #: A1
------------------------------------------
[ ] Espresso
    - No sugar, Regular 9oz, Hot
                              {H3} {R} x 1
------------------------------------------
[ ] Blueberry Cheesecake
    - Slice
                              {H3} {R} x 1

{QR[Where are the aliens?]}
`;

async function testPrinter() {
  try {
    // Can be `network` or `bluetooth`
    EscPos.setConfig({ type: "network" });

    // Connects to your printer
    // If you use `bluetooth`, second parameter is not required.
    await EscPos.connect("10.10.10.10", 9100);

    // Once connected, you can setup your printing size, either `PRINTING_SIZE_58_MM` or `PRINTING_SIZE_80_MM`
    EscPos.setPrintingSize(EscPos.PRINTING_SIZE_80_MM);
    // 0 to 8 (0-3 = smaller, 4 = default, 5-8 = larger)
    EscPos.setTextDensity(9);
    // Test Print
    await EscPos.printSample();
    // Cut half!
    await EscPos.cutPart();
    // You can also print image!
    await EscPos.printImage(file.uri);
    // Print your design!
    await EscPos.printDesign(design);
    // Print QR Code, you can specify the size
    await EscPos.printQRCOde("Proxima b is the answer!", 200);
    // Cut full!
    await EscPos.cutFull();
    // Beep!
    await EscPos.beep();
    // Disconnect
    await EscPos.disconnect();
  } catch (error) {
    console.error(error);
  }
}

Scan For Bluetooth Devices

To scan for available bluetooth in range

EscPos.scanDevices();

To stop scan

EscPos.stopScan();

Register callback events to receive device found:-

EscPos.addListener("bluetoothDeviceFound", (event: any) => {
  if (event.state === EscPos.BLUETOOTH_DEVICE_FOUND) {
    console.log("Device Found!");
    console.log("Device Name : " + event.deviceInfo.name);
    console.log("Device MAC Address : " + event.deviceInfo.macAddress);
  }

Events

To listen to bluetooth state change

EscPos.addListener("bluetoothStateChanged", (event: any) => {
  if (event.state === EscPos.BLUETOOTH_CONNECTED) {
    console.log("Device Connected!");
    console.log("Device Name : " + event.deviceInfo.name);
    console.log("Device MAC Address : " + event.deviceInfo.macAddress);
  }
});

To get Bluetooth Conenction State:

  • EscPos.BLUETOOTH_CONNECTED
  • EscPos.BLUETOOTH_DISCONNECTED

To get Connected / Disconnected Bluetooth Device Info Device Name:

  • event.deviceInfo.name

Device MAC Address:

  • event.deviceInfo.macAddress

TODO

  • Android support
  • iOS support
  • Print barcode
  • Add TypeScript support
  • Bluetooth support
  • Serial port support
  • Add test
  • Listen to the connection status

react-native-esc-pos's People

Contributors

codyteng avatar usenbekov avatar bradjones1 avatar leesiongchan avatar btazi avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.