✨ Allow user to skip default styles (#416)

* ✨ Allow user to skip default styles

* 🔖 v3.1.0

README.md

@@ -145,6 +145,13 @@ const handlePaste: React.ClipboardEventHandler<HTMLDivElement> = (event) => {
     <td>false</td>
     <td>Auto focuses input on initial page load.</td>
   </tr>
+  <tr>
+    <td>skipDefaultStyles</td>
+    <td>boolean</td>
+    <td>false</td>
+    <td>false</td>
+    <td>The component comes with default styles for legacy reasons. Pass <code>true</code> to skip those styles. This prop will be removed in the next major release.</td>
+  </tr>
 </table>
 
 ### ⚠️ Warning

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-otp-input",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "A fully customizable, one-time password input component for the web built with React",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

src/index.tsx

@@ -48,6 +48,8 @@ interface OTPInputProps {
   inputStyle?: React.CSSProperties | string;
   /** The type that will be passed to the input being rendered */
   inputType?: AllowedInputTypes;
+  /** Do not apply the default styles to the inputs, will be removed in future versions */
+  skipDefaultStyles?: boolean; // TODO: Remove in next major release
 }
 
 const isStyleObject = (obj: unknown) => typeof obj === 'object' && obj !== null;
@@ -64,6 +66,7 @@ const OTPInput = ({
   placeholder,
   containerStyle,
   inputStyle,
+  skipDefaultStyles = false,
 }: OTPInputProps) => {
   const [activeInput, setActiveInput] = React.useState(0);
   const inputRefs = React.useRef<Array<HTMLInputElement | null>>([]);
@@ -238,8 +241,8 @@ const OTPInput = ({
               maxLength: 1,
               'aria-label': `Please enter OTP character ${index + 1}`,
               style: Object.assign(
-                { width: '1em', textAlign: 'center' } as const,
-                isStyleObject(inputStyle) && inputStyle
+                !skipDefaultStyles ? ({ width: '1em', textAlign: 'center' } as const) : {},
+                isStyleObject(inputStyle) ? inputStyle : {}
               ),
               className: typeof inputStyle === 'string' ? inputStyle : undefined,
               type: inputType,