0.1.0 • Published 2 years ago

react-native-input-for-otp v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

  1. vda-account
PropsTypeRequiredDescription
maxInputLenghtnumbertrue
onOtpReadyfunctiontruea Hexa-decimal color e.g (#0000)
codestringtrueotp code state
onSetCodefunctiontruefunction to update opt code state
boxFocusedStylestyle objectfalsecustom box focused style
boxStylestyle objectfalsebox style
boxTextStylestyle objectfalsebox 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