rfid-reader-input v0.0.1

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

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](https://www.linkedin.com/in/digoarthur/)

buy rfid reader device: [rfid reader device](https://pt.aliexpress.com/item/1005006223111716.html?spm=a2g0o.productlist.main.9.298dlG1PlG1Pcy&algo_pvid=1cdd1d61-b417-4c92-adad-21983a1f853c&aem_p4p_detail=2024040608001417840825173963440008723047&algo_exp_id=1cdd1d61-b417-4c92-adad-21983a1f853c-4&pdp_npi=4%40dis%21EUR%2111.30%218.47%21%21%2186.59%2164.94%21%402101e62517124156146654903ebec3%2112000036353233564%21sea%21PT%21738581998%21&curPageLogUid=OYyStQk6kG9U&utparam-url=scene%3Asearch%7Cquery_from%3A&search_p4p_id=2024040608001417840825173963440008723047_1)