onAuthStateChange- Type
(state: "idle" | "scanning" | "success" | "error") => void- Default
- -
- Description
- Authorization callback triggered by scanning milestones.
Components / Inputs
Biometric Scanner
கைரேகை சரிபார்ப்பு
Simulates biometric authentication. The scanner provides clear sensory feedback (visual ripples, color changes, and bilingual status messages) during the authorization cycle.
ஆதார் மற்றும் பிற கைரேகை சரிபார்ப்பை உருவகப்படுத்தும் ஒரு கூறு.
Part of Ration Shop POS Block
This component is featured in the comprehensive Ration Shop Point of Sale block pattern.
Interactive Preview
Component preview
Biometric Scannerகைரேகை சரிபார்ப்புAnatomy
Structure
Anatomy
4 parts documented for implementation and review.
1
Device Frame
சாதன சட்டகம்required<div>Container wrapping the biometric terminal mimicking secure STQC hardware.
2
Scanner Pad
சென்சார் பகுதிrequired<button>Interactive circular pad simulating fingerprint scanning. Supports ripple rings when in scanning state.
3
Status Text
நிலை உரைrequired<p>Bilingual instructions guiding the operator (e.g. 'Place finger', 'Verified', 'Match Failed').
4
User Info Bar
பயனர் விவரப் பட்டி<div>Monospace metadata section showing the user ID, type, and authentication status.
API
Props
className- Type
string- Default
- -
- Description
- Layout container styles.
| Prop | Type | Default | Description |
|---|---|---|---|
onAuthStateChange | (state: "idle" | "scanning" | "success" | "error") => void | - | Authorization callback triggered by scanning milestones. |
className | string | - | Layout container styles. |
Best practices
Provide clear status feedback
தெளிவான நிலை தகவலை வழங்கவும்
Ensure the scanner outputs visual ripple animations during active scanning and unambiguous success/error states.
கைரேகை சரிபார்க்கும் போது அனிமேஷன் மற்றும் வெற்றிகரமான/பிழையான நிலைகளை தெளிவாகக் காட்டவும்.
Don't rely solely on color cues
நிறங்களை மட்டுமே நம்பியிருக்க வேண்டாம்
Avoid signaling success or failure using green/red colors only. Always couple color shifts with clear bilingual text updates.
சிவப்பு அல்லது பச்சை நிறங்களை மட்டுமே நம்பி நிலையை வெளிப்படுத்தக் கூடாது. எப்போதுமே தெளிவான எழுத்துக்களை அதனுடன் சேர்க்க வேண்டும்.
Accessibility
- Renders as an interactive
<button>that can be focused and activated via Space or Enter. - Bilingual labels ensure clear instructions for both English and Tamil speaking operators.
- Uses high-contrast color transitions (brand blue for scanning, emerald green for success, and red for failure) adhering to WCAG contrast standards.