📡 @bryan/nfc-listener

A lightweight Socket.IO-based NFC listener for JavaScript/TypeScript projects.
Works with any frontend framework and provides real-time events for NFC card readers and UID verification.

🚀 Features

• Connects to any Socket.IO endpoint using WebSocket transport
• Listens for Card UID and Verified UID events
• Handles connection and disconnection
• Tracks reader connect/disconnect events
• Handles read errors gracefully
• Framework-agnostic: works with React, Next.js, Vue, Angular, plain JS

📦 Installation

# Using npm
npm install @bryan/nfc-listener

# Using pnpm
pnpm add @bryan/nfc-listener

# Using yarn
yarn add @bryan/nfc-listener


# NFC Listener Standalone Page (React/Next.js)

This is a standalone page example using the `@bryan/nfc-listener` package with React/Next.js.

🛠 Example Usage In React

"use client";

import { useEffect, useState } from "react";
import { NfcHandler } from "@brynrgnzls/nfc-listener";

const SOCKET_URL = "http://127.0.0.1:8000";

export default function NfcPage() {
  const [connected, setConnected] = useState(false);
  const [cardUid, setCardUid] = useState<string | null>(null);
  const [verifiedUid, setVerifiedUid] = useState<string | null>(null);
  const [readerStatus, setReaderStatus] = useState<string[]>([]);
  const [readErrors, setReadErrors] = useState<string[]>([]);

  useEffect(() => {
    const nfc = new NfcHandler(SOCKET_URL);

    nfc.onConnect(() => setConnected(true));
    nfc.onDisconnect(() => setConnected(false));
    nfc.onCardUid((uid) => setCardUid(uid));
    nfc.onVerifiedUid((uid) => setVerifiedUid(uid));
    nfc.onReaderConnect((name) =>
      setReaderStatus((prev) => [...prev, `${name} connected`])
    );
    nfc.onReaderDisconnect((name) =>
      setReaderStatus((prev) => [...prev, `${name} disconnected`])
    );
    nfc.onReadError((err) => setReadErrors((prev) => [...prev, err]));

    nfc.open();
    return () => nfc.close();
  }, []);

  return (
    <main>
      <h1>NFC Listener Standalone Page</h1>
      <p>Status: {connected ? "Connected" : "Disconnected"}</p>
      <p>Last Card UID: {cardUid ?? "None"}</p>
      <p>Last Verified UID: {verifiedUid ?? "None"}</p>

      <h2>Reader Status</h2>
      {readerStatus.length === 0 ? (
        "No reader events"
      ) : (
        <ul>
          {readerStatus.map((r, i) => (
            <li key={i}>{r}</li>
          ))}
        </ul>
      )}

      <h2>Read Errors</h2>
      {readErrors.length === 0 ? (
        "No errors"
      ) : (
        <ul>
          {readErrors.map((e, i) => (
            <li key={i}>{e}</li>
          ))}
        </ul>
      )}
    </main>
  );
}