Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/digoarthur/rfid-reader-input
Connect your RFID reader and already have a component to capture the value.
https://github.com/digoarthur/rfid-reader-input
attached component javascript library npm opensource reactjs rfid-reader
Last synced: 11 days ago
JSON representation
Connect your RFID reader and already have a component to capture the value.
- Host: GitHub
- URL: https://github.com/digoarthur/rfid-reader-input
- Owner: DIGOARTHUR
- License: mit
- Created: 2024-03-30T11:44:43.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-11T15:27:26.000Z (7 months ago)
- Last Synced: 2024-12-03T03:05:30.176Z (19 days ago)
- Topics: attached, component, javascript, library, npm, opensource, reactjs, rfid-reader
- Language: TypeScript
- Homepage: https://template-rfid-reader-input.vercel.app
- Size: 103 KB
- Stars: 16
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
< RFIDReaderInput / >
Capture RFID reading from Your React app in an elegant and restricted way!!
## 1. Installation
```shell
npm install rfid-reader-input
# or
yarn add rfid-reader-input
```
## 2. Using Component
```jsx
import { RFIDReaderInput } from 'rfid-reader-input'
...
```
## 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
```jsx
import { RFIDReaderInput } from 'rfid-reader-input'
```
## Component
```jsx
```
#### 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](https://template-rfid-reader-input.vercel.app)
### Code
```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 (
<>
{serialCard?serialCard:'‹ RFIDReaderInput /›'}
Open 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 ⭐ ⬆️.**
`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)
