React RFID Input Reader

A lightweight and flexible solution for integrating RFID readers into React applications. Designed to abstract the complexity of data capture, allowing you to attach reading logic to any existing input without compromising the UI/UX or visual structure of your project.

📦 NPM: react-rfid-input-reader

🎬 Demo

✨ Features

• 🎯 Easy to use - Ready-to-use hook with minimal configuration
• 🔧 Highly configurable - Customize size limits and timeout
• 📦 Lightweight - Zero external dependencies besides React
• 🎨 Flexible - Works with any HTML input or custom component
• 🔄 Auto-focus - Automatically keeps focus on input (configurable)
• 🎁 Bonus modal - Optional modal component for visual feedback (completely decoupled from the core logic)

📦 Installation

npm install react-rfid-input-reader

or

yarn add react-rfid-input-reader

or

pnpm add react-rfid-input-reader

🚀 Basic Usage

Simple Input Example

import { useRFIDReader } from "react-rfid-input-reader";

function RFIDInput() {
  const { inputRef, handleKeyDown } = useRFIDReader({
    onRead: (code) => {
      console.log("RFID code read:", code);
    },
  });

  return (
    <input
      ref={inputRef}
      onKeyDown={handleKeyDown}
      placeholder="Tap your RFID card..."
      style={{ opacity: 0, position: "absolute" }}
    />
  );
}

Complete Example with Visual Feedback

import { useState } from "react";
import { useRFIDReader, RfIdValidateModal } from "react-rfid-input-reader";

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [status, setStatus] = useState<"loading" | "success" | "error">(
    "loading"
  );
  const [lastCode, setLastCode] = useState("");

  const { inputRef, handleKeyDown } = useRFIDReader({
    onRead: async (code) => {
      setLastCode(code);
      setIsModalOpen(true);
      setStatus("loading");

      // Simulate code validation
      const isValid = await validateRFIDCode(code);
      setStatus(isValid ? "success" : "error");
    },
    minLength: 8,
    maxLength: 12,
    timeoutDuration: 500,
    active: true,
  });

  return (
    <div>
      <input
        ref={inputRef}
        onKeyDown={handleKeyDown}
        placeholder="Waiting for scan..."
      />

      <RfIdValidateModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="RFID Validation"
        message="Processing scan..."
        status={status}
      >
        {status === "success" && <p>Valid code: {lastCode}</p>}
        {status === "error" && <p>Invalid code!</p>}
      </RfIdValidateModal>
    </div>
  );
}

📖 API

useRFIDReader

Main hook for capturing RFID readings.

Parameters

| Property | Type | Default | Description | | ----------------- | ------------------------ | ------------ | ---------------------------------------------- | | onRead | (code: string) => void | required | Callback executed when a valid code is read | | minLength | number | 8 | Minimum code length to be considered valid | | maxLength | number | 12 | Maximum code length to be considered valid | | timeoutDuration | number | 500 | Time (ms) to clear the buffer after inactivity | | active | boolean | true | Enables/disables reading and auto-focus |

Return

| Property | Type | Description | | --------------- | ----------------------------- | ------------------------------------- | | inputRef | RefObject<HTMLInputElement> | Reference to attach to the input | | handleKeyDown | (e: KeyboardEvent) => void | Keyboard event handler | | focusInput | () => void | Function to force focus on the input | | clearBuffer | () => void | Function to manually clear the buffer |

RfIdValidateModal (Optional Bonus Component)

⚠️ Note: This modal is completely optional and decoupled from the core useRFIDReader hook. The hook works independently and you can use your own UI components for feedback. This modal is provided as a convenience bonus for quick prototyping or simple use cases.

Modal component for visual feedback during validation.

Props

| Property | Type | Default | Description | | ---------- | ----------------------------------- | ------------------------------- | -------------------------------- | | isOpen | boolean | required | Controls modal visibility | | onClose | () => void | required | Callback when closing the modal | | title | string | "RFID Validation" | Modal title | | message | string | "Waiting for card reading..." | Message displayed during loading | | status | 'loading' \| 'success' \| 'error' | "loading" | Visual state of the modal | | children | ReactNode | - | Custom content |

💡 How It Works

1. The hook monitors keyboard events on the referenced input
2. Typed characters are accumulated in an internal buffer
3. When Enter is pressed, the code is validated by length
4. If valid, the onRead callback is called with the code
5. The buffer is automatically cleared after the configured timeout

🔧 Use Cases

• Access control - Badge and card validation
• Inventory - Reading RFID tags on products
• Time tracking - Clock in/out registration
• Events - Attendee check-in

📄 License

MIT © Kayo Silva