https://github.com/crusaderincode/authinput
Set of authentication inputs for React Native including name, email, phone number and show/hide password.
https://github.com/crusaderincode/authinput
authentification hide-show password react react-native react-native-component
Last synced: 4 months ago
JSON representation
Set of authentication inputs for React Native including name, email, phone number and show/hide password.
- Host: GitHub
- URL: https://github.com/crusaderincode/authinput
- Owner: crusaderincode
- Created: 2021-05-26T17:40:06.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-28T12:21:22.000Z (about 4 years ago)
- Last Synced: 2025-02-11T13:15:24.505Z (5 months ago)
- Topics: authentification, hide-show, password, react, react-native, react-native-component
- Language: JavaScript
- Homepage:
- Size: 60.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Auth Input
Auth Input is a React Native custom component, providing fields for entering name, password, phone number and email.
## Installation
Install the package with NPM.
```bash
npm i auth-input
```
## Usage
Usage is very simple. Just add the component to your file.
```javascript
import React, {useState} from 'react';
import { Text, View } from 'react-native';
import AuthInput from 'auth-input'
export default function App() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const emailHandler = (text) => {
setEmail(text)
}
const passwordHandler = (text) => {
setPassword(text)
}
return (
);
}
```
## Properties
Prop | Type | Description | Default | Optional
--- | --- | --- | --- |---
type | string | Type of input ("email", "phone", "name" or "password") | - | no
label| string | Text above the input | - | no
keyboardType | string | [Default Ract Native TextInput keyboard types](https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/) | default | yes
minLength| number| lower bound of text length | - | yes
maxLength| number| Upper limit of text length | - | yes
errorText| string | Text that appears when the user has entered incorrect data| - | no
onInputChange| function| Input handler function | - | no
value| string| Input state | - | no
borderColor| string| Bottom border color | black | yes
errorTextColor| string| Error color | red | yes
textColor| string| Text color | black | yes
labelColor | string| Label above the input color | textColor | yes
labelColor | number| Label above the input font size | 20 | yes
You can use properties of [TextInput](https://reactnative.dev/docs/textinput).
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
## License
[MIT](https://choosealicense.com/licenses/mit/)