Skip to content

✨ Allow user to skip default styles #416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
prateek3255 merged 2 commits into from
Sep 26, 2023
Merged

✨ Allow user to skip default styles #416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed1e5f5
:sparkles: Allow user to skip default styles
prateek3255 Sep 26, 2023
9167357
:bookmark: v3.1.0
prateek3255 Sep 26, 2023
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,13 @@ export default function App() {
<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
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
7 changes: 5 additions & 2 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,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;
Expand All @@ -61,6 +63,7 @@ const OTPInput = ({
placeholder,
containerStyle,
inputStyle,
skipDefaultStyles = false,
}: OTPInputProps) => {
const [activeInput, setActiveInput] = React.useState(0);
const inputRefs = React.useRef<Array<HTMLInputElement | null>>([]);
Expand Down Expand Up @@ -234,8 +237,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,
Expand Down