diff --git a/README.md b/README.md index 5efb379a..be2bae36 100644 --- a/README.md +++ b/README.md @@ -145,6 +145,13 @@ const handlePaste: React.ClipboardEventHandler = (event) => { false Auto focuses input on initial page load. + + skipDefaultStyles + boolean + false + false + The component comes with default styles for legacy reasons. Pass true to skip those styles. This prop will be removed in the next major release. + ### ⚠️ Warning diff --git a/package.json b/package.json index f390e701..640e0142 100644 --- a/package.json +++ b/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", diff --git a/src/index.tsx b/src/index.tsx index 612619bd..cc0538f0 100644 --- a/src/index.tsx +++ b/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>([]); @@ -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,