identify-biometrics
v1.0.1
Published
A biometric scanning UI component with facial recognition animation for React, Laravel, and vanilla JavaScript
Maintainers
susangathuReadme
Identify Biometrics
A comprehensive biometric scanning UI component library with facial recognition animation. Supports React, Next.js, Laravel, and vanilla JavaScript.
Features
- 🎯 Multi-Framework Support: React, Next.js, Laravel, and vanilla JS
- 🎨 Amber Color Scheme: Beautiful orange/brown color palette
- ⚡ Sequential Animation: Realistic facial feature scanning with orange dots
- 📱 Responsive Design: Works on both desktop and mobile
- ✅ Success/Error States: Visual feedback for scan results
- 🎛️ Customizable: Colors, sizes, and animation timing
- 🔧 TypeScript Support: Full type definitions included
Installation
npm install identify-biometricsQuick Start
React / Next.js
import React, { useState } from 'react';
import { ReactBiometricScanner } from 'identify-biometrics';
function App() {
const [isScanning, setIsScanning] = useState(false);
const [status, setStatus] = useState('idle');
const handleScanComplete = (result) => {
console.log('Scan result:', result);
setStatus(result);
setIsScanning(false);
};
return (
<div>
<ReactBiometricScanner
isScanning={isScanning}
status={status}
onScanComplete={handleScanComplete}
size="medium"
/>
<button onClick={() => setIsScanning(true)}>
Start Scan
</button>
</div>
);
}Laravel Blade
First, publish the service provider:
php artisan vendor:publish --provider="IdentifyBiometrics\IdentifyBiometricsServiceProvider"Then use in your Blade templates:
<x-biometric-scanner
:is-scanning="true"
status="scanning"
size="medium"
class="my-scanner"
/>Or with custom colors:
<x-biometric-scanner
:is-scanning="true"
status="scanning"
dot-color="#f59e0b"
bracket-color="#d97706"
background-color="#fef3c7"
size="large"
/>Vanilla JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Biometric Scanner</title>
</head>
<body>
<div id="scanner-container"></div>
<script type="module">
import { createBiometricScanner } from 'identify-biometrics';
const container = document.getElementById('scanner-container');
const scanner = createBiometricScanner(container, {
size: 'medium',
onScanComplete: (result) => {
console.log('Scan result:', result);
}
});
// Start scanning
scanner.startScanning();
// Stop scanning
scanner.stopScanning();
// Reset scanner
scanner.resetScanning();
// Set error state
scanner.setError();
</script>
</body>
</html>API Reference
Props / Options
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| isScanning | boolean | false | Whether the scanner is currently active |
| status | string | 'idle' | Current status: 'idle', 'scanning', 'success', 'error' |
| onScanComplete | function | - | Callback when scan completes with result |
| dotColor | string | '#f59e0b' | Color of the scanning dots (amber-500) |
| bracketColor | string | '#d97706' | Color of the corner brackets (amber-600) |
| backgroundColor | string | '#fef3c7' | Background color (amber-100) |
| size | string | 'medium' | Size: 'small', 'medium', 'large' |
| className | string | '' | Additional CSS classes |
Methods (Vanilla JS)
| Method | Description |
|--------|-------------|
| startScanning() | Begin the biometric scan animation |
| stopScanning() | Stop the current scan |
| resetScanning() | Reset to idle state |
| setError() | Set error state |
| updateOptions(options) | Update component options |
| destroy() | Clean up the component |
Customization
Color Schemes
The package uses an amber color scheme by default, but you can customize all colors:
<ReactBiometricScanner
dotColor="#f59e0b" // Orange dots
bracketColor="#d97706" // Darker orange brackets
backgroundColor="#fef3c7" // Light amber background
/>Sizes
Three predefined sizes are available:
small: 200x250pxmedium: 300x375px (default)large: 400x500px
Animation Timing
The facial feature dots appear sequentially with 200ms intervals, creating a realistic scanning effect. The total scan duration is approximately 4 seconds.
Framework-Specific Notes
React / Next.js
- Uses styled-components for styling
- Fully typed with TypeScript
- Supports all React hooks
Laravel
- Blade component with server-side rendering
- Includes JavaScript for client-side interactions
- Service provider for easy integration
Vanilla JavaScript
- No dependencies required
- Works in any modern browser
- Full programmatic control
Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
MIT License - see LICENSE file for details.
Support
For questions and support, please open an issue on GitHub.