adding inputName prop

Author: dev-javascript

README.md

@@ -14,7 +14,7 @@ Whether you want to showcase a constant list of options or dynamically adapt to
 
 - Clear button
 
-- `Rtl` support
+- Rtl support
 
 - Flexible style
 
@@ -75,6 +75,16 @@ function App() {
 - **onChange**
   - type : `Func`
   - description : onChange Handler for the input value
+- **onClear?**
+  - type : `Func`
+  - description : triggered when the user clicks on the Clear icon
+- **theme?**
+  - type : `"outline"|"underline"|"panel"`
+  - description : searchbox theme
+  - default : `"outline"`
+- **autoFocus?**
+  - type : `Boolean`
+  - default : `Fasle`
 - **children**
   - type : `ReactNode`
   - description : suggestions list
@@ -116,16 +126,10 @@ function App() {
 - **MagnifierIconComponent?**
   - type : `React function component`
   - description : custom Magnifier icon
-- **onClear?**
-  - type : `Func`
-  - description : triggered when the user clicks on the Clear icon
-- **theme?**
-  - type : `"outline"|"underline"|"panel"`
-  - description : searchbox theme
-  - default : `"outline"`
-- **autoFocus?**
-  - type : `Boolean`
-  - default : `Fasle`
+- **inputName?**
+  - type : `String`
+  - description : name attribute for the input element
+  - default : `""`
 
 ## Test
 

src/index.js

@@ -24,6 +24,7 @@ import ClearIcon from './icons/clear.js';
  * @param {"underline"|"outline"|"panel"} [props.theme="outline"] - searchbox theme
  * @param {Boolean} [props.corner=true] - if set true then border-radius would be "5px"
  * @param {Boolean} [props.autoFocus=false] - autoFocus attribute for the input element
+ * @param {String} [props.inputName=""] - name attribute for the input element
  */
 function ReactCustomSearchList(props) {
   const {
@@ -46,6 +47,7 @@ function ReactCustomSearchList(props) {
     theme = 'outline',
     corner = true,
     autoFocus = false,
+    inputName = '',
   } = props;
   const [open, setOpen] = useState(false);
   const rootRef = useRef();
@@ -99,6 +101,7 @@ function ReactCustomSearchList(props) {
           placeholder={placeholder}
           style={inputStyle}
           autoFocus={autoFocus}
+          {...(inputName ? {name: inputName} : {})}
         />
         {ClearIconComponent ? <ClearIconComponent value={value} onClear={onClear} /> : null}