https://github.com/chnirt/react-native-captcha
https://github.com/chnirt/react-native-captcha
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/chnirt/react-native-captcha
- Owner: chnirt
- License: mit
- Created: 2024-12-10T05:29:55.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-12-10T06:34:11.000Z (10 months ago)
- Last Synced: 2025-04-07T10:41:01.382Z (6 months ago)
- Language: TypeScript
- Size: 7.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-captcha
A lightweight React Native library that provides an easy-to-use text-based CAPTCHA component for user verification. This library includes basic functionality for validating user input through a mathematical CAPTCHA, and supports customizable placeholder text, verification buttons, and automatic CAPTCHA reset after a timeout.
## Demo
### **Text-based CAPTCHA**
## Installation
To install the library, run:
```sh
npm install @chnirt/react-native-captcha
```
## Usage
Here’s an example of how to use the TextCaptcha component in your React Native app:
```js
import React, {useRef, useState} from 'react';
import {
SafeAreaView,
TextInput,
TouchableOpacity,
Text,
StyleSheet,
Alert,
} from 'react-native';
import {TextCaptcha} from '@chnirt/react-native-captcha';
export default function App() {
const captchaRef = useRef(null);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const validateEmail = (inputEmail: string): boolean => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(inputEmail);
};
const validatePassword = (inputPassword: string): boolean => {
return inputPassword.length >= 6;
};
const handleRegister = () => {
// Validate email and password
if (!validateEmail(email)) {
Alert.alert('Invalid Email', 'Please enter a valid email address.');
return;
}
if (!validatePassword(password)) {
Alert.alert(
'Invalid Password',
'Password must be at least 6 characters.',
);
return;
}
const success = captchaRef.current.verifyCaptcha();
if (success) {
Alert.alert('Success', 'CAPTCHA passed!');
// Token is valid, you can continue with registration.
} else {
Alert.alert('Failure', 'CAPTCHA validation failed.');
}
};
return (
Register
);
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: '#D3D3D3',
padding: 10,
borderRadius: 5,
},
button: {
backgroundColor: '#539AE6',
padding: 10,
borderRadius: 5,
alignItems: 'center',
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
},
});
```
## Features
- **Text-based CAPTCHA**: A simple text-based CAPTCHA for user verification.
- **Verification State**: Automatically disables the input field after successful CAPTCHA verification.
- **Timeout Handling**: Resets the CAPTCHA after a predefined timeout duration.
- **Retry Logic**: Allows users to reload the CAPTCHA if they fail to verify.
- **Customizable Placeholder and Button Text**: Easily customize the placeholder for the input field and button text for verification.
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)