< RFIDReaderInput / >

RFID-logo

Capture your RFID reading from your React application in a practical and easy way!

!NPM Paackage
!CodeFactor
!GitHub

!ReactJS

!Check

1. Installation

shell

    npm install rfid-reader-input

    # or

    yarn add rfid-reader-input





2. Using Component

jsx

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



    ...



          open={isOpenRFIDReaderInput}

      onRequestClose={_handleCloseRFIDReaderInput}

      handleCodeCardRFID={setCodecard}

     />





3. Connect RFID card reader





















4. Swipe the card on the reader 







 !d20ac76d-b212-4730-955a-d6fa16efd887 (1) (1)





  





 


  


   


  














 

 

 

  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                             |

| :-------------------------------------------------------------------: |

|   !image |













  


   


  




  



 

 

  Library 



Import

jsx

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





Component

jsx

           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  





####   



$3

jsx    

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(false)



  function handleOpenRFID() { 

  

    setOpenCardReaderWindow(true);

}



function handleCloseRFID() {

    setOpenCardReaderWindow(false);

  }



  return (

    <>



         

        

                      onMouseEnter={handleMouseEnter}

            onMouseLeave={handleMouseLeave}

            style={boxStyle} alt="React logo"

          />

        

      

      {serialCard?serialCard:'‹ RFIDReaderInput 	/›'}

      

        

        

          Edit src/App.tsx and save to test

        

      

      

        Click on the RFIDReaderInput  logo to learn more

      

    

  )

}



export default App





---



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

: @digoarthur

buy rfid reader device`: rfid reader device

< RFIDReaderInput / >

RFID-logo

Capture your RFID reading from your React application in a practical and easy way!

!NPM Paackage
!CodeFactor
!GitHub

!ReactJS

!Check

1. Installation

shell

    npm install rfid-reader-input

    # or

    yarn add rfid-reader-input





2. Using Component

jsx

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



    ...



          open={isOpenRFIDReaderInput}

      onRequestClose={_handleCloseRFIDReaderInput}

      handleCodeCardRFID={setCodecard}

     />





3. Connect RFID card reader





















4. Swipe the card on the reader 







 !d20ac76d-b212-4730-955a-d6fa16efd887 (1) (1)





  





 


  


   


  














 

 

 

  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                             |

| :-------------------------------------------------------------------: |

|   !image |













  


   


  




  



 

 

  Library 



Import

jsx

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





Component

jsx

           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  





####   



$3

jsx    

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(false)



  function handleOpenRFID() { 

  

    setOpenCardReaderWindow(true);

}



function handleCloseRFID() {

    setOpenCardReaderWindow(false);

  }



  return (

    <>



         

        

                      onMouseEnter={handleMouseEnter}

            onMouseLeave={handleMouseLeave}

            style={boxStyle} alt="React logo"

          />

        

      

      {serialCard?serialCard:'‹ RFIDReaderInput 	/›'}

      

        

        

          Edit src/App.tsx and save to test

        

      

      

        Click on the RFIDReaderInput  logo to learn more

      

    

  )

}



export default App





---



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

: @digoarthur

buy rfid reader device`: rfid reader device