Merge pull request #1 from KaboCash/v1.1

Upgraded the component to v1.1

Author: Octagon-simon

README.md

@@ -1,14 +1,15 @@
-### OTP-APP
+### React-OTP Component
 
-This React / NextJS App helps you add an OTP input box in your REACTJS / Next JS app
+This is a highly customizable React JS component that you use within your project to enable OTP Code submissions.
 
 ## INSTALLATION STEPS
 
-After cloning or downloading the code, run `npm install` to install all dependencies
+> Please note that this component does not make use of any external library and this means that you can literally copy these files `otpInputs.js` && `otpInputs.module.css` into your project and you're good to go
+
+After cloning the repo or downloading the source code, run `npm install` to install all dependencies.
 
 ```bash
 $ npm install
-
 ```
 
 When the dependencies are installed, and you encounter a babel error, run the command below to resolve this error
@@ -17,14 +18,23 @@ When the dependencies are installed, and you encounter a babel error, run the co
 $ npm install --save-dev @babel/plugin-proposal-private-property-in-object --legacy-peer-deps
 ```
 
-Now Fire up your server
+Now Fire up your server 🔥
 
 ```bash
 $ npm run start
 ```
 
 Visit the server at `http://localhost:3000` to view the app
 
+## CONFIGURATION
+
+- From `v1.1`, `autoSubmit` is configurable when you call the component `<OTPInputGroup autoSubmit={false} />`. 
+  - If you set this prop to `true`, the form will call the submit function once all boxes has been filled, otherwise, you need to hit the submit button for the form to be submitted.
+
+- This simple app supports both Numbers and Letters. 
+  - If you need only numbers or letters, be sure to modify it to suit your project.
+
+
 ## Read the article here
 
 [On Medium](https://simon-ugorji.medium.com/how-to-create-an-otp-input-box-in-react-js-next-js-3acc6adf5d6b)

src/App.js

@@ -1,13 +1,53 @@
 import OTPInputGroup from "./otpInputs";
 
 function App() {
+
+  const styles = {
+    app: {
+      fontSize: '.89rem',
+      height: '100dvh',
+      display: 'flex',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      backgroundColor: '#f9f9f9'
+    },
+
+    formWrapper: {
+      padding: '20px',
+      maxWidth: 'calc(340px - 20px)',
+      width: '100%',
+      margin: 'auto',
+      boxShadow: '0px 0px 8px #ddd',
+      // borderRadius: '10px',.
+      backgroundColor: '#fff',
+      border: '1px solid #ffffff'
+    },
+
+    title: {
+      textAlign: 'center',
+      margin: '0 0 1.4rem 0',
+      fontSize: '1.3rem',
+      fontWeight: '500',
+    },
+
+    notification: {
+      margin: '20px 0',
+      padding: '20px',
+      backgroundColor: '#eff5fb',
+      color: '#296fa8',
+      fontWeight: '500'
+    }
+  }
+
   return (
-    <div className="app">
-      <form method="post">
-        <h2>Verify Email Address</h2>
+    <div className="app" style={styles.app}>
+      <div style={styles.formWrapper}>
+        <form method="post">
+          <h2 style={styles.title}>Enter verification code</h2>
+          <div style={styles.notification}>Check your inbox for a verification code and enter it below</div>
           <OTPInputGroup />
-      </form>
-
+        </form>
+      </div>
     </div>
   );
 }