0.1.0 • Published 2 years ago
react-native-input-for-otp v0.1.0
react-native-otp-input-fields
react-native-otp-input-fields
A Light weight simple and flexible react native opt input
experimental needs to be improved.
Installation
# npm
npm install react-native-otp-input-fields
# yarn
yarn add install react-native-otp-input-fields
Usage
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import OTPInput from 'react-native-otp-input-fields';
export default function App() {
const [code, setCode] = React.useState < string > '';
const [isOTPReady, setOTPReady] = React.useState(false);
React.useEffect(() => {
if (isOTPReady) {
console.log('OPT completely entered');
}
}, [isOTPReady]);
return (
<View style={styles.container}>
<OTPInput
code={code}
maxInputLenght={4}
onOtpReady={callback}
onSetCode={setCode}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Props
vda-account
Props | Type | Required | Description |
---|---|---|---|
maxInputLenght | number | true | |
onOtpReady | function | true | a Hexa-decimal color e.g (#0000) |
code | string | true | otp code state |
onSetCode | function | true | function to update opt code state |
boxFocusedStyle | style object | false | custom box focused style |
boxStyle | style object | false | box style |
boxTextStyle | style object | false | box text style |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library
0.1.0
2 years ago