feat: add inputProps prop

Author: ugogo

README.md

@@ -51,23 +51,29 @@ export default function App() {
 
 ### Props
 
-| Key         | Type                     | Default      | Required | Description                                        |
-| ----------- | ------------------------ | ------------ | -------- | -------------------------------------------------- |
-| autoFocus   | `boolean`                | false        | false    | Should focus on first render                       |
-| length      | `number`                 | `4`          | false    | How many inputs will be rendered                   |
-| onChange    | `function`               | `() => null` | false    | Function called when the value changes             |
-| onCompleted | `function`               | `() => null` | false    | Function called when the value is completed        |
-| placeholder | `string`                 | `·`          | false    | Inputs placeholder                                 |
-| value       | `string`                 | `""`         | false    | Default value                                      |
-| type        | `'alphanumeric, number'` | `number`     | false    | Should accepts alphanumeric values or only numbers |
+| Key         | Type                                           | Default      | Required | Description                                        |
+| ----------- | ---------------------------------------------- | ------------ | -------- | -------------------------------------------------- |
+| autoFocus   | `boolean`                                      | false        | false    | Should focus on first render                       |
+| inputProps  | `React.InputHTMLAttributes<HTMLInputElement>;` | `undefined`  | false    | Allow passing custom props into the inputs         |
+| length      | `number`                                       | `4`          | false    | How many inputs will be rendered                   |
+| onChange    | `function`                                     | `() => null` | false    | Function called when the value changes             |
+| onCompleted | `function`                                     | `() => null` | false    | Function called when the value is completed        |
+| placeholder | `string`                                       | `·`          | false    | Inputs placeholder                                 |
+| value       | `string`                                       | `""`         | false    | Default value                                      |
+| type        | `'alphanumeric, number'`                       | `number`     | false    | Should accepts alphanumeric values or only numbers |
 
 ### Custom Styles
 
 Simply override the styles using the following classnames
 
 ```css
-.ReactInputVerificationCode-container {}
-.ReactInputVerificationCode-item {}
+.ReactInputVerificationCode-container {
+  /*  */
+}
+
+.ReactInputVerificationCode-item {
+  /*  */
+}
 ```
 
 ## License

src/index.stories.tsx

@@ -28,6 +28,14 @@ WithDefaultValue.args = {
   value: '7890',
 };
 
+export const CustomInputProps = Template.bind({});
+CustomInputProps.args = {
+  placeholder: '',
+  inputProps: {
+    type: 'password',
+  },
+};
+
 export const CustomLength = Template.bind({});
 CustomLength.args = {
   length: 6,
@@ -38,19 +46,6 @@ CustomPlaceholder.args = {
   placeholder: '⎽',
 };
 
-export const CustomType = Template.bind({});
-CustomType.args = {
-  type: 'alphanumeric',
-};
-CustomType.argTypes = {
-  type: {
-    control: {
-      type: 'select',
-      options: ['number', 'alphanumeric'],
-    },
-  },
-};
-
 const CustomStylesContainer = styled.div`
   position: relative;
 
@@ -79,3 +74,16 @@ export const CustomStyles = () => (
     <ReactInputVerificationCode autoFocus placeholder='' />
   </CustomStylesContainer>
 );
+
+export const CustomType = Template.bind({});
+CustomType.args = {
+  type: 'alphanumeric',
+};
+CustomType.argTypes = {
+  type: {
+    control: {
+      type: 'select',
+      options: ['number', 'alphanumeric'],
+    },
+  },
+};

src/index.tsx

@@ -2,6 +2,7 @@ import React, {
   ChangeEvent,
   ClipboardEvent,
   createRef,
+  InputHTMLAttributes,
   KeyboardEvent,
   useEffect,
   useMemo,
@@ -12,6 +13,7 @@ import './index.css';
 
 export interface ReactInputVerificationCodeProps {
   autoFocus?: boolean;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
   length?: number;
   onChange?: (data: string) => void;
   onCompleted?: (data: string) => void;
@@ -22,6 +24,7 @@ export interface ReactInputVerificationCodeProps {
 
 const ReactInputVerificationCode = ({
   autoFocus = false,
+  inputProps,
   length = 4,
   onChange = () => null,
   onCompleted = () => null,
@@ -222,6 +225,7 @@ const ReactInputVerificationCode = ({
           placeholder={placeholder}
           ref={ref}
           value={values[i]}
+          {...inputProps}
         />
       ))}
     </div>