< RFIDReaderInput / >

Capture RFID reading from Your React app in an elegant and restricted way!!

1. Installation

    npm install rfid-reader-input
    # or
    yarn add rfid-reader-input

2. Using Component

    import { RFIDReaderInput } from 'rfid-reader-input'

    ...

    <RFIDReaderInput
      open={isOpenRFIDReaderInput}
      onRequestClose={_handleCloseRFIDReaderInput}
      handleCodeCardRFID={setCodecard}
     />

3. Connect RFID card reader

4. Swipe the card on the reader

About Library

This library has a React component, , to facilitate data entry while reading from your RFID device. Use in your Dashboard systems to control presence, record processes linked to people, etc.

Advantages

• Component already made. Install, import and use.
• Void capturing digits from the keyboard.
• Intuitive and customizable layout

RFIDReaderInput

Library

Import

    import { RFIDReaderInput } from 'rfid-reader-input'

Component

     <RFIDReaderInput
      open={isOpenRFIDReaderInput}
      onRequestClose={handleClose}
      handleCodeCardRFID={setCodecard}
      textTitle='RFID Identification'
      textBody='Hold your card'
     />

Props

Important

For the component to work, insert the properties correctly. You can follow the code example.

• (mandatory) open < boolean > : here a variable with the value of false or true is inserted to open the Input.
• (mandatory) onRequestClose < ( ) => void > : receives a function to change the variable to the true state, closing the Input.
• (mandatory) handleCodeCardRFID < (code: string) => void > : Here a function is inserted that will receive the value captured from the reading device. It can be a state function coming from the parent component, or from a contextAPI.
• (optional) textTitle: < string > : text to change the card title.
• (optional) textBody: < string > : text to change the card body.

Code Example

Note

Structured code in ViteJS

Template Online

https://template-rfid-reader-input.vercel.app

Code

import { useState } from 'react'
import './App.css'

import { RFIDReaderInput } from 'rfid-reader-input';
function App() {
  //CSS EFFECT
  const [isHover, setIsHover] = useState(false);

  const handleMouseEnter = () => {
    setIsHover(true);
  };
  const handleMouseLeave = () => {
    setIsHover(false);
  };

  const boxStyle = {
    filter: isHover ? 'drop-shadow(0 0 5em #617874ee)' : ''
  };


  //RFIDReaderInput State
  const [serialCard, setSerialcard] = useState('');
  const [openCardReaderWindow, setOpenCardReaderWindow] = useState<boolean>(false)

  function handleOpenRFID() { 
  
    setOpenCardReaderWindow(true);
}

function handleCloseRFID() {
    setOpenCardReaderWindow(false);
  }

  return (
    <>
      <div>
      <RFIDReaderInput isOpen={openCardReaderWindow} onRequestClose={handleCloseRFID} handleCodeCardRFID={ setSerialcard} />   
        <a href="https://github.com/DIGOARTHUR/rfid-reader-input" target="_blank">
          <img src='https://github.com/DIGOARTHUR/rfid-reader-input/assets/59892368/a6367195-e847-4157-bffb-5932d73bd076'
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
            style={boxStyle} alt="React logo"
          />
        </a>
      </div>
      <h1>{serialCard?serialCard:'‹ RFIDReaderInput 	/›'}</h1>
      <div className="card">
        <button  onClick={handleOpenRFID}>
          Open RFIDReaderInput
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test
        </p>
      </div>
      <p className="read-the-docs">
        Click on the RFIDReaderInput  logo to learn more
      </p>
    </>
  )
}

export default App

---

Love rfid-reader-input? Give our repo a star ⭐ ⬆️.

by: @digoarthur

buy rfid reader device: rfid reader device