feat: remove the passwordMask prop in favor of placeholder

Author: ugogo

README.md

@@ -23,6 +23,7 @@ A verification code input, autocompletion friendly
   "styled-components": ">=5.0.0"
 }
 ```
+
 ## Install
 
 ```bash
@@ -48,16 +49,15 @@ export default function App() {
 
 ### Props
 
-| Key         | Type       | Default    | Required | Description                                               |
-| ----------- | ---------- | ---------- | -------- | --------------------------------------------------------- |
-| autoFocus   | `boolean`  | false      | false    | Focus on render                                           |
-| length      | `number`   | `4`        | false    | How many items will be rendered                           |
-| onChange    | `function` | `() => {}` | false     | Function called when the value changes                    |
-| onCompleted | `function` | `() => {}` | false    | Function called when the code is completed                |
-| placeholder | `string`   | `·`        | false    | String rendered in each item when no value has been typed |
-| value       | `string`   | `() => {}` | false    | Control internal input value                              |
-| type        | `text` or `password` | `text`     | false    | Display the item value or a password mask       |
-| passwordMask | `string` | `•`    | false    | Password mask       |
+| Key         | Type                 | Default    | Required | Description                                               |
+| ----------- | -------------------- | ---------- | -------- | --------------------------------------------------------- |
+| autoFocus   | `boolean`            | false      | false    | Focus on render                                           |
+| length      | `number`             | `4`        | false    | How many items will be rendered                           |
+| onChange    | `function`           | `() => {}` | false    | Function called when the value changes                    |
+| onCompleted | `function`           | `() => {}` | false    | Function called when the code is completed                |
+| placeholder | `string`             | `·`        | false    | String rendered in each item when no value has been typed |
+| value       | `string`             | `() => {}` | false    | Control internal input value                              |
+| type        | `text` or `password` | `text`     | false    | Display the item value or a password mask                 |
 
 ### CSS Properties
 

src/index.tsx

@@ -17,7 +17,6 @@ export interface ReactInputVerificationCodeProps {
   value?: string;
   dataCy?: string;
   type?: 'text' | 'password';
-  passwordMask?: string;
 }
 
 const ReactInputVerificationCode = ({
@@ -29,7 +28,6 @@ const ReactInputVerificationCode = ({
   value: pValue,
   dataCy = 'verification-code',
   type = 'text',
-  passwordMask = '•',
 }: ReactInputVerificationCodeProps) => {
   const emptyValue = new Array(length).fill(placeholder);
 
@@ -173,7 +171,7 @@ const ReactInputVerificationCode = ({
 
   const renderItemText = (itemValue: string) => {
     if (itemValue === placeholder) return placeholder;
-    return type === 'password' ? passwordMask : itemValue;
+    return type === 'password' ? placeholder : itemValue;
   };
 
   return (