Code Monkey home page Code Monkey logo

react-dymo's Introduction

react-dymo

Collections of javascript and react utilities to handle the Dymo LabelWriter web service.

NPM JavaScript Style Guide

Install

npm install --save react-dymo-hooks

or

yarn add react-dymo-hooks

API

printLabel()

Print Dymo labels

Arguments

  • {string} printerName - The Dymo Printer to print on
  • {string} labelXml - Label XML parsed to string
  • {string} labelSetXml - LabelSet to print. LabelSet is used to print multiple labels with same layout but different data, e.g. multiple addresses.

useDymoCheckService()

Return the status of DYMO Label Web Service

Arguments

  • port: The port of running DYMO Label Web Service. (For defualt is the 41951)

Returns

  • status: "initial" | "loading" | "success" | "error" Status of DYMO Label Web Service.

useDymoFetchPrinters()

Returns the available DYMO Labelwriter Printer

Arguments

  • statusDymoService: The status of DYMO Label Web Service. (Use the status returned fot the useDymoCheckService() hook)
  • modelPrinter: The model of label writer printer.
  • port: The port of running DYMO Label Web Service. (For defualt is the 41951)

Returns

Object containing:

  • statusFetchPrinters: "initial" | "loading" | "success" | "error" Status of loading printers.
  • printers: The list of available DYMO Printer.
  • error.

useDymoOpenLabel()

Render Label

Arguments

  • statusDymoService: The status of DYMO Label Web Service. (Use the status returned fot the useDymoCheckService() hook)
  • labelXML: XML file.
  • port: The port of running DYMO Label Web Service. (For defualt is the 41951)

Returns

Object containing:

  • statusOpenLabel: "initial" | "loading" | "success" | "error" Status of open label.
  • label.
  • error.

Run examples

Inside the root directory project

  1. Switch to the directory example/
  2. yarn install or npm install
  3. yarn run start or npm run-script start

Examples

Print a Dymo Label

import {printLabel} from "react-dymo-hooks";

async function handlePrintSingleLabel(printerName, labelXml) {
  try {
    const response = await printLabel(printerName, labelXml);
    console.info(response);
  } catch (error) {
    console.error(error);
  }
}

<button onClick={() => handlePrintLabel(printer, xml)} />;
import {useDymoOpenLabel, useDymoCheckService} from "react-dymo-hooks";

const DymoLabelPreview = () => {
  const statusDymoService = useDymoCheckService();
  const {label, statusOpenLabel, errorOpenLabel} = useDymoOpenLabel(statusDymoService, xmlFile);

  if (label) {
    return <img src={"data:image/png;base64," + label} alt="dymo label preview" />;
  } else {
    return null;
  }
};

License

MIT © apenab

react-dymo's People

Contributors

apenab 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.