Capture your RFID reading from your React application in a practical and easy way!
npm install rfid-reader-input
# or
yarn add rfid-reader-input import { RFIDReaderInput } from 'rfid-reader-input'
...
<RFIDReaderInput
open={isOpenRFIDReaderInput}
onRequestClose={_handleCloseRFIDReaderInput}
handleCodeCardRFID={setCodecard}
/>
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.
- Component already made. Install, import and use.
- Void capturing digits from the keyboard.
- Intuitive and customizable layout
| RFIDReaderInput |
|---|
import { RFIDReaderInput } from 'rfid-reader-input' <RFIDReaderInput
open={isOpenRFIDReaderInput}
onRequestClose={handleClose}
handleCodeCardRFID={setCodecard}
textTitle='RFID Identification'
textBody='Hold your card'
/>[!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.
[!NOTE] Structured code in ViteJS
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 AppLove rfid-reader-input? Give our repo a star ⭐ ⬆️.
by: @digoarthur
buy rfid reader device: rfid reader device