react-input-code - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/CodeItem.d.ts

@@ -14,4 +14,5 @@ import * as React from 'react';
     autoFocus?: boolean;
+    placeholder?: string;
 }
 declare const CodeItem: (props: CodeItemProps) => JSX.Element;
 export default CodeItem;

dist/index.js

@@ -14,3 +14,4 @@ var React = require('react');
       interactionCounter = props.interactionCounter,
-      autoFocus = props.autoFocus;
+      autoFocus = props.autoFocus,
+      placeholder = props.placeholder;
   var inputRef = React.useRef(null);
@@ -49,3 +50,4 @@ React.useEffect(function () {
     maxLength: 1,
-    onFocus: handleFocus
+    onFocus: handleFocus,
+    placeholder: placeholder
   }));
@@ -63,3 +65,4 @@ };
       onChange = props.onChange,
-      autoFocus = props.autoFocus;
+      autoFocus = props.autoFocus,
+      placeholder = props.placeholder;
 
@@ -99,2 +102,10 @@ var _useState = React.useState(0),
 
+  var placeholderFirstChar = React.useMemo(function () {
+    if (placeholder && placeholder.length > 1) {
+      return placeholder.charAt(0);
+    }
+
+    return placeholder;
+  }, [placeholder]);
+
   var getElements = function getElements() {
@@ -121,3 +132,4 @@ var retElements = [];
         interactionCounter: interactionCounter,
-        autoFocus: autoFocus
+        autoFocus: autoFocus,
+        placeholder: placeholderFirstChar
       });
@@ -124,0 +136,0 @@ retElements.push(el);

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../src/CodeItem.tsx","../src/CodeItemList.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef } from 'react';\nimport styles from './CodeItem.module.css'\n\nexport interface CodeItemProps {\n  itemClassName: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;\n  itemIndex: number;\n  currentIndex: number;\n  setCurrentIndex: (index: number) => void;\n  type: React.HTMLInputTypeAttribute | undefined;\n  onClickHandler: (index: number) => void;\n  isFocused: boolean;\n  interactionCounter: number;\n  autoFocus?: boolean;\n}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus } = props;\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    const inputEl: any = inputRef.current;\n    if (interactionCounter === 0 && !autoFocus) {\n      inputEl && inputEl.blur();\n      return;\n    }\n    if (isFocused) {\n      inputEl && inputEl.focus();\n    } else {\n      inputEl && inputEl.blur();\n    }\n  }, [isFocused, interactionCounter])\n\n  useEffect(() => {\n\n  }, [])\n  \n  const handleFocus = (event: any) => event.target.select();\n\n  return (\n    <React.Fragment>\n      <input\n        ref={inputRef}\n        type={type}\n        value={value || ''}\n        onChange={(e) => onChange(e, itemIndex)}\n        className={`code-item ${styles['code-item']} ${itemClassName}`}\n        onClick={() => onClickHandler(itemIndex)}\n        maxLength={1}\n        onFocus={handleFocus}\n      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { useState } from 'react';\nimport CodeItem from './CodeItem';\nimport { ReactInputCodeProps } from './types/ReactInputCode';\nimport styles from './CodeItemList.module.css'\n\nconst CodeItemList = (props: ReactInputCodeProps) => {\n  const { className, nItems, itemClassName, value, type, onChange, autoFocus } = props;\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [interactionCounter, setInteractionCounter] = useState(0)\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, _index: number) => {\n    const itemValue = e.target.value\n    const codeLength = (value && value.length) || 0\n    if (_index <= codeLength) {\n      let str = value.split('');\n      str[_index] = itemValue;\n      str = str.join('');\n      onChange(str)\n      setCurrentIndex(currentIndex+1)\n    }\n  }\n\n  const onClickHandler = (_index: number) => {\n    const codeLength = (value && value.length) || 0\n    if (_index > codeLength) {\n      setCurrentIndex(codeLength)\n    } else {\n      setCurrentIndex(_index)\n    }\n    setInteractionCounter(interactionCounter + 1)\n  }\n\n  const getElements = (): JSX.Element[] => {\n    const retElements: JSX.Element[] = [];\n    if (!nItems) {\n      return retElements;\n    }\n    for (let i = 0; i < nItems; i++) {\n      const elValue = i > (value && value.length) ? '' : value[i]\n\n      const el = <CodeItem\n        key={`item-${i}`}\n        value={elValue}\n        onChange={onChangeHandler}\n        onClickHandler={onClickHandler}\n        itemClassName={itemClassName || ''}\n        itemIndex={i}\n        type={type || 'text'}\n        currentIndex={currentIndex}\n        setCurrentIndex={setCurrentIndex}\n        isFocused={currentIndex === i}\n        interactionCounter={interactionCounter}\n        autoFocus={autoFocus}\n      />\n      retElements.push(el)\n    }\n    return retElements;\n  }\n\n  return (\n    <React.Fragment>      \n      <div className={`codes-container ${className} ${styles['codes-container']}`}>\n        {getElements()}\n      </div>\n    </React.Fragment>)\n}\n\nexport default CodeItemList;","import * as React from 'react'\nimport CodeItemList from './CodeItemList'\nimport { ReactInputCodeProps } from './types/ReactInputCode'\n\nconst ReactInputCode = (props: ReactInputCodeProps) => <CodeItemList {...props}/>\n\nexport default ReactInputCode;"],"names":["CodeItem","props","itemClassName","value","onChange","itemIndex","type","onClickHandler","isFocused","interactionCounter","autoFocus","inputRef","useRef","useEffect","inputEl","current","blur","focus","handleFocus","event","target","select","React","ref","e","className","styles","onClick","maxLength","onFocus","CodeItemList","nItems","useState","currentIndex","setCurrentIndex","setInteractionCounter","onChangeHandler","_index","itemValue","codeLength","length","str","split","join","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/CodeItem.tsx","../src/CodeItemList.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef } from 'react';\nimport styles from './CodeItem.module.css'\n\nexport interface CodeItemProps {\n  itemClassName: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;\n  itemIndex: number;\n  currentIndex: number;\n  setCurrentIndex: (index: number) => void;\n  type: React.HTMLInputTypeAttribute | undefined;\n  onClickHandler: (index: number) => void;\n  isFocused: boolean;\n  interactionCounter: number;\n  autoFocus?: boolean;\n  placeholder?: string;\n}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus, placeholder } = props;\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    const inputEl: any = inputRef.current;\n    if (interactionCounter === 0 && !autoFocus) {\n      inputEl && inputEl.blur();\n      return;\n    }\n    if (isFocused) {\n      inputEl && inputEl.focus();\n    } else {\n      inputEl && inputEl.blur();\n    }\n  }, [isFocused, interactionCounter])\n\n  useEffect(() => {\n\n  }, [])\n\n  const handleFocus = (event: any) => event.target.select();\n\n  return (\n    <React.Fragment>\n      <input\n        ref={inputRef}\n        type={type}\n        value={value || ''}\n        onChange={(e) => onChange(e, itemIndex)}\n        className={`code-item ${styles['code-item']} ${itemClassName}`}\n        onClick={() => onClickHandler(itemIndex)}\n        maxLength={1}\n        onFocus={handleFocus}\n        placeholder={placeholder}\n      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { useMemo, useState } from 'react';\nimport CodeItem from './CodeItem';\nimport { ReactInputCodeProps } from './types/ReactInputCode';\nimport styles from './CodeItemList.module.css'\n\nconst CodeItemList = (props: ReactInputCodeProps) => {\n  const { className, nItems, itemClassName, value, type, onChange, autoFocus,\n    placeholder } = props;\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [interactionCounter, setInteractionCounter] = useState(0)\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, _index: number) => {\n    const itemValue = e.target.value\n    const codeLength = (value && value.length) || 0\n    if (_index <= codeLength) {\n      let str = value.split('');\n      str[_index] = itemValue;\n      str = str.join('');\n      onChange(str)\n      setCurrentIndex(currentIndex+1)\n    }\n  }\n\n  const onClickHandler = (_index: number) => {\n    const codeLength = (value && value.length) || 0\n    if (_index > codeLength) {\n      setCurrentIndex(codeLength)\n    } else {\n      setCurrentIndex(_index)\n    }\n    setInteractionCounter(interactionCounter + 1)\n  }\n\n  const placeholderFirstChar = useMemo(() => {\n    if (placeholder && placeholder.length >1) {\n      return placeholder.charAt(0)\n    }  \n    return placeholder\n  }, [placeholder])\n  \n  const getElements = (): JSX.Element[] => {\n    const retElements: JSX.Element[] = [];\n    if (!nItems) {\n      return retElements;\n    }\n    for (let i = 0; i < nItems; i++) {\n      const elValue = i > (value && value.length) ? '' : value[i]\n\n      const el = <CodeItem\n        key={`item-${i}`}\n        value={elValue}\n        onChange={onChangeHandler}\n        onClickHandler={onClickHandler}\n        itemClassName={itemClassName || ''}\n        itemIndex={i}\n        type={type || 'text'}\n        currentIndex={currentIndex}\n        setCurrentIndex={setCurrentIndex}\n        isFocused={currentIndex === i}\n        interactionCounter={interactionCounter}\n        autoFocus={autoFocus}\n        placeholder={placeholderFirstChar}\n      />\n      retElements.push(el)\n    }\n    return retElements;\n  }\n\n  return (\n    <React.Fragment>      \n      <div className={`codes-container ${className} ${styles['codes-container']}`}>\n        {getElements()}\n      </div>\n    </React.Fragment>)\n}\n\nexport default CodeItemList;","import * as React from 'react'\nimport CodeItemList from './CodeItemList'\nimport { ReactInputCodeProps } from './types/ReactInputCode'\n\nconst ReactInputCode = (props: ReactInputCodeProps) => <CodeItemList {...props}/>\n\nexport default ReactInputCode;"],"names":["CodeItem","props","itemClassName","value","onChange","itemIndex","type","onClickHandler","isFocused","interactionCounter","autoFocus","placeholder","inputRef","useRef","useEffect","inputEl","current","blur","focus","handleFocus","event","target","select","React","ref","e","className","styles","onClick","maxLength","onFocus","CodeItemList","nItems","useState","currentIndex","setCurrentIndex","setInteractionCounter","onChangeHandler","_index","itemValue","codeLength","length","str","split","join","placeholderFirstChar","useMemo","charAt","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":"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"}

dist/index.modern.js

@@ -1,2 +0,2 @@
-import { useRef, useEffect, createElement, Fragment, useState } from 'react';
+import { useRef, useEffect, createElement, Fragment, useState, useMemo } from 'react';
 
@@ -14,3 +14,4 @@ var styles = {"code-item":"_1TXHq"};
       interactionCounter = props.interactionCounter,
-      autoFocus = props.autoFocus;
+      autoFocus = props.autoFocus,
+      placeholder = props.placeholder;
   var inputRef = useRef(null);
@@ -49,3 +50,4 @@ useEffect(function () {
     maxLength: 1,
-    onFocus: handleFocus
+    onFocus: handleFocus,
+    placeholder: placeholder
   }));
@@ -63,3 +65,4 @@ };
       onChange = props.onChange,
-      autoFocus = props.autoFocus;
+      autoFocus = props.autoFocus,
+      placeholder = props.placeholder;
 
@@ -99,2 +102,10 @@ var _useState = useState(0),
 
+  var placeholderFirstChar = useMemo(function () {
+    if (placeholder && placeholder.length > 1) {
+      return placeholder.charAt(0);
+    }
+
+    return placeholder;
+  }, [placeholder]);
+
   var getElements = function getElements() {
@@ -121,3 +132,4 @@ var retElements = [];
         interactionCounter: interactionCounter,
-        autoFocus: autoFocus
+        autoFocus: autoFocus,
+        placeholder: placeholderFirstChar
       });
@@ -124,0 +136,0 @@ retElements.push(el);

dist/index.modern.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/CodeItem.tsx","../src/CodeItemList.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef } from 'react';\nimport styles from './CodeItem.module.css'\n\nexport interface CodeItemProps {\n  itemClassName: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;\n  itemIndex: number;\n  currentIndex: number;\n  setCurrentIndex: (index: number) => void;\n  type: React.HTMLInputTypeAttribute | undefined;\n  onClickHandler: (index: number) => void;\n  isFocused: boolean;\n  interactionCounter: number;\n  autoFocus?: boolean;\n}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus } = props;\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    const inputEl: any = inputRef.current;\n    if (interactionCounter === 0 && !autoFocus) {\n      inputEl && inputEl.blur();\n      return;\n    }\n    if (isFocused) {\n      inputEl && inputEl.focus();\n    } else {\n      inputEl && inputEl.blur();\n    }\n  }, [isFocused, interactionCounter])\n\n  useEffect(() => {\n\n  }, [])\n  \n  const handleFocus = (event: any) => event.target.select();\n\n  return (\n    <React.Fragment>\n      <input\n        ref={inputRef}\n        type={type}\n        value={value || ''}\n        onChange={(e) => onChange(e, itemIndex)}\n        className={`code-item ${styles['code-item']} ${itemClassName}`}\n        onClick={() => onClickHandler(itemIndex)}\n        maxLength={1}\n        onFocus={handleFocus}\n      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { useState } from 'react';\nimport CodeItem from './CodeItem';\nimport { ReactInputCodeProps } from './types/ReactInputCode';\nimport styles from './CodeItemList.module.css'\n\nconst CodeItemList = (props: ReactInputCodeProps) => {\n  const { className, nItems, itemClassName, value, type, onChange, autoFocus } = props;\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [interactionCounter, setInteractionCounter] = useState(0)\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, _index: number) => {\n    const itemValue = e.target.value\n    const codeLength = (value && value.length) || 0\n    if (_index <= codeLength) {\n      let str = value.split('');\n      str[_index] = itemValue;\n      str = str.join('');\n      onChange(str)\n      setCurrentIndex(currentIndex+1)\n    }\n  }\n\n  const onClickHandler = (_index: number) => {\n    const codeLength = (value && value.length) || 0\n    if (_index > codeLength) {\n      setCurrentIndex(codeLength)\n    } else {\n      setCurrentIndex(_index)\n    }\n    setInteractionCounter(interactionCounter + 1)\n  }\n\n  const getElements = (): JSX.Element[] => {\n    const retElements: JSX.Element[] = [];\n    if (!nItems) {\n      return retElements;\n    }\n    for (let i = 0; i < nItems; i++) {\n      const elValue = i > (value && value.length) ? '' : value[i]\n\n      const el = <CodeItem\n        key={`item-${i}`}\n        value={elValue}\n        onChange={onChangeHandler}\n        onClickHandler={onClickHandler}\n        itemClassName={itemClassName || ''}\n        itemIndex={i}\n        type={type || 'text'}\n        currentIndex={currentIndex}\n        setCurrentIndex={setCurrentIndex}\n        isFocused={currentIndex === i}\n        interactionCounter={interactionCounter}\n        autoFocus={autoFocus}\n      />\n      retElements.push(el)\n    }\n    return retElements;\n  }\n\n  return (\n    <React.Fragment>      \n      <div className={`codes-container ${className} ${styles['codes-container']}`}>\n        {getElements()}\n      </div>\n    </React.Fragment>)\n}\n\nexport default CodeItemList;","import * as React from 'react'\nimport CodeItemList from './CodeItemList'\nimport { ReactInputCodeProps } from './types/ReactInputCode'\n\nconst ReactInputCode = (props: ReactInputCodeProps) => <CodeItemList {...props}/>\n\nexport default ReactInputCode;"],"names":["CodeItem","props","itemClassName","value","onChange","itemIndex","type","onClickHandler","isFocused","interactionCounter","autoFocus","inputRef","useRef","useEffect","inputEl","current","blur","focus","handleFocus","event","target","select","React","ref","e","className","styles","onClick","maxLength","onFocus","CodeItemList","nItems","useState","currentIndex","setCurrentIndex","setInteractionCounter","onChangeHandler","_index","itemValue","codeLength","length","str","split","join","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/CodeItem.tsx","../src/CodeItemList.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef } from 'react';\nimport styles from './CodeItem.module.css'\n\nexport interface CodeItemProps {\n  itemClassName: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;\n  itemIndex: number;\n  currentIndex: number;\n  setCurrentIndex: (index: number) => void;\n  type: React.HTMLInputTypeAttribute | undefined;\n  onClickHandler: (index: number) => void;\n  isFocused: boolean;\n  interactionCounter: number;\n  autoFocus?: boolean;\n  placeholder?: string;\n}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus, placeholder } = props;\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    const inputEl: any = inputRef.current;\n    if (interactionCounter === 0 && !autoFocus) {\n      inputEl && inputEl.blur();\n      return;\n    }\n    if (isFocused) {\n      inputEl && inputEl.focus();\n    } else {\n      inputEl && inputEl.blur();\n    }\n  }, [isFocused, interactionCounter])\n\n  useEffect(() => {\n\n  }, [])\n\n  const handleFocus = (event: any) => event.target.select();\n\n  return (\n    <React.Fragment>\n      <input\n        ref={inputRef}\n        type={type}\n        value={value || ''}\n        onChange={(e) => onChange(e, itemIndex)}\n        className={`code-item ${styles['code-item']} ${itemClassName}`}\n        onClick={() => onClickHandler(itemIndex)}\n        maxLength={1}\n        onFocus={handleFocus}\n        placeholder={placeholder}\n      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { useMemo, useState } from 'react';\nimport CodeItem from './CodeItem';\nimport { ReactInputCodeProps } from './types/ReactInputCode';\nimport styles from './CodeItemList.module.css'\n\nconst CodeItemList = (props: ReactInputCodeProps) => {\n  const { className, nItems, itemClassName, value, type, onChange, autoFocus,\n    placeholder } = props;\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [interactionCounter, setInteractionCounter] = useState(0)\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, _index: number) => {\n    const itemValue = e.target.value\n    const codeLength = (value && value.length) || 0\n    if (_index <= codeLength) {\n      let str = value.split('');\n      str[_index] = itemValue;\n      str = str.join('');\n      onChange(str)\n      setCurrentIndex(currentIndex+1)\n    }\n  }\n\n  const onClickHandler = (_index: number) => {\n    const codeLength = (value && value.length) || 0\n    if (_index > codeLength) {\n      setCurrentIndex(codeLength)\n    } else {\n      setCurrentIndex(_index)\n    }\n    setInteractionCounter(interactionCounter + 1)\n  }\n\n  const placeholderFirstChar = useMemo(() => {\n    if (placeholder && placeholder.length >1) {\n      return placeholder.charAt(0)\n    }  \n    return placeholder\n  }, [placeholder])\n  \n  const getElements = (): JSX.Element[] => {\n    const retElements: JSX.Element[] = [];\n    if (!nItems) {\n      return retElements;\n    }\n    for (let i = 0; i < nItems; i++) {\n      const elValue = i > (value && value.length) ? '' : value[i]\n\n      const el = <CodeItem\n        key={`item-${i}`}\n        value={elValue}\n        onChange={onChangeHandler}\n        onClickHandler={onClickHandler}\n        itemClassName={itemClassName || ''}\n        itemIndex={i}\n        type={type || 'text'}\n        currentIndex={currentIndex}\n        setCurrentIndex={setCurrentIndex}\n        isFocused={currentIndex === i}\n        interactionCounter={interactionCounter}\n        autoFocus={autoFocus}\n        placeholder={placeholderFirstChar}\n      />\n      retElements.push(el)\n    }\n    return retElements;\n  }\n\n  return (\n    <React.Fragment>      \n      <div className={`codes-container ${className} ${styles['codes-container']}`}>\n        {getElements()}\n      </div>\n    </React.Fragment>)\n}\n\nexport default CodeItemList;","import * as React from 'react'\nimport CodeItemList from './CodeItemList'\nimport { ReactInputCodeProps } from './types/ReactInputCode'\n\nconst ReactInputCode = (props: ReactInputCodeProps) => <CodeItemList {...props}/>\n\nexport default ReactInputCode;"],"names":["CodeItem","props","itemClassName","value","onChange","itemIndex","type","onClickHandler","isFocused","interactionCounter","autoFocus","placeholder","inputRef","useRef","useEffect","inputEl","current","blur","focus","handleFocus","event","target","select","React","ref","e","className","styles","onClick","maxLength","onFocus","CodeItemList","nItems","useState","currentIndex","setCurrentIndex","setInteractionCounter","onChangeHandler","_index","itemValue","codeLength","length","str","split","join","placeholderFirstChar","useMemo","charAt","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":"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"}

dist/types/ReactInputCode.d.ts

@@ -10,2 +10,3 @@ /// <reference types="react" />
     autoFocus?: boolean;
+    placeholder?: string;
 }

package.json

 {
   "name": "react-input-code",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "React component to insert a code in a series of single char input elements",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -34,6 +34,4 @@ # react-input-code
       nItems={6}
-      autoFocus={true} />
-
-    <p>Current value: {value}</p>
-  </>
+      autoFocus={true} 
+      placeholder={'-'}/>
 }
@@ -47,6 +45,7 @@ ```
 * onChange - subscribe to change events
-* type - type attribute of each html input element ('text', 'number', 'password', etc...)
-* className - additional class applied to the component container
-* itemClassName - additional class applied to each element
+* type - (optional) type attribute of each html input element ('text', 'number', 'password', etc...). Default value is 'text'
+* className - (optional) additional class applied to the component container
+* itemClassName - (optional) additional class applied to each element
 * autoFocus - (optional) if set to true the first elemnt will be focused on component load
+* placeholder - (optional) placeholder, the same char introduced in each element. If more than one char is present, only the first char will be considered
 
@@ -53,0 +52,0 @@

No alert changes

Improved metrics

Total package byte prevSize

31536

8.03%

Lines of code

307

7.72%

Worsened metrics

Number of lines in readme file

59

-1.67%

No dependency changes