updates

README.md

@@ -58,17 +58,9 @@ import React from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import OtpInput from './OtpInput';
-import {OtpFormLabel} from "./AuthFormStyles"; // Assuming OtpInput is in the same directory
 
 const YOUR_OTP_LENGTH = 6; // Replace this with the length of your OTP
 
-// Validation schema
-// const validationSchema = Yup.object({
-//     otp: Yup.string()
-//         .required('OTP is required')
-//         .length(YOUR_OTP_LENGTH, `OTP must be exactly ${YOUR_OTP_LENGTH} characters long`),
-//     // ... validation for other fields
-// });
 
 // CSS Styles
 const formStyle = {
@@ -96,7 +88,7 @@ const submitButtonStyle = {
     border: 'none',
     borderRadius: '5px',
     cursor: 'pointer',
-    marginTop: '20px', // Added top margin
+    marginTop: '20px',
 
     ':hover': {
         backgroundColor: '#45a049',
@@ -108,7 +100,7 @@ const OtpForm = () => {
     const formik = useFormik({
         initialValues: {
             otp: '',
-            // ... other form fields
+            // ... other form fields if you wish
         },
         onSubmit: (values) => {
             console.log('Form data:', values);
@@ -135,11 +127,14 @@ const OtpForm = () => {
                 // textColor={'#FFFFFF'}
                 // backgroundColor={'#FFFFFF'}
                 // borderColor={'#FFFFFF'}
+                // ... override any pre-existing styles if required
+                // style={{
+                //     'backgroundColor': '#ffc300'
+                // }}
             />
             {formik.errors.otp && formik.touched.otp && (
                 <div style={errorTextStyle}>{formik.errors.otp}</div>
             )}
-
             <button type="submit" style={submitButtonStyle} >Submit</button>
         </form>
     );

demo/src/App.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {CSSProperties, useEffect, useState} from 'react';
 import {
     AuthButtonSeparator, AuthForm,
     AuthFormContainer,
@@ -9,8 +9,6 @@ import {
 import {useFormik} from "formik";
 import OtpInput from './OtpInput';
 import styled from "styled-components";
-import OtpForm from "./Form";
-
 
 // OTP settings container
 const OTPSettingsContainer = styled.div`
@@ -54,16 +52,46 @@ const Label = styled.label`
   color: #333;
 `;
 
+// CSS Styles
+const formStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: '20px',
+};
+
+const fieldStyle: CSSProperties = {
+    margin: '10px 0',
+};
+
+const errorTextStyle: CSSProperties = {
+    marginTop: '15px',
+    fontSize: '14px',
+    color: '#ff6b6b',
+    marginBottom: '10px',
+};
+
+const submitButtonStyle: CSSProperties = {
+    padding: '10px 20px',
+    backgroundColor: '#4caf50',
+    color: 'white',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    marginTop: '20px', // Added top margin
+
+};
+
 function App() {
 
     const [otpProps, setOtpProps] = useState({
         length: 4,
         inputType: "numeric",
         autoFocus: true,
         autoSubmit: true,
-        textColor: '#000000',        // Default text color
-        backgroundColor: '#ffffff',  // Default background color
-        highlightColor: '#ff8000',
+        textColor: '#000000',
+        backgroundColor: '#ffffff',
+        highlightColor: '#4caf50',
         borderColor: '#DDDDDD'
     });
 
@@ -188,7 +216,29 @@ function App() {
             <AuthButtonSeparator/>
 
             <AuthFormContent>
-                <OtpForm/>
+                <form style={formStyle} onSubmit={formik.handleSubmit} key={formKey}>
+                    <OtpInput
+                        length={otpProps.length}
+                        value={formik.values.otp}
+                        inputType={otpProps.inputType}    // options are numeric, alphabetic or alphanumeric
+                        autoFocus={otpProps.autoFocus}    // Default is true. Will auto-focus first digit if true
+                        autoSubmit={otpProps.autoSubmit}    // Default is true. Will auto-submit form onFullFill
+                        onBlur={formik.handleBlur}   // Formik handler, used to handle onBlur events
+                        onChange={formik.handleChange}   // Formik handler, used to handle change events
+                        onFullFill={formik.handleSubmit}     // Formik handler, used to handle autoSubmit
+                        setFieldError={formik.setFieldError}     // Formik handler, used to handle error rendering
+                        setFieldTouched={formik.setFieldTouched}
+                        // ... other props you need to pass
+                        highlightColor={otpProps.highlightColor}
+                        textColor={otpProps.textColor}
+                        backgroundColor={otpProps.backgroundColor}
+                        borderColor={otpProps.borderColor}
+                    />
+                    {formik.errors.otp && formik.touched.otp && (
+                        <div style={errorTextStyle}>{formik.errors.otp}</div>
+                    )}
+                    <button type="submit" style={submitButtonStyle} >Submit</button>
+                </form>
             </AuthFormContent>
         </AuthFormContainer>
     );