From 4ac54679c6a5a4d9cd5a96d850d333405aa626af Mon Sep 17 00:00:00 2001
From: Noman Gazi <numan.islam61@gmail.com>
Date: Wed, 14 Feb 2024 12:28:31 +0600
Subject: [PATCH] A label is added instead of a placeholder.

Previously placeholder props worked to display labels outside of input boxes. However, a placeholder is an attribute of the input box that is used to display a message inside the input box.

Added new label. which will act like the previous placeholder.
---
 README.md                             | 6 ++++++
 examples/BasicExample.tsx             | 3 ++-
 react-multi-email/ReactMultiEmail.tsx | 7 +++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 8115fea..5fc02b2 100644
--- a/README.md
+++ b/README.md
@@ -198,6 +198,12 @@ export default BasicExample;
   <tr>
     <td>
     placeholder</td>
+    <td>string</td>
+    <td></td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>label</td>
     <td>string | React.ReactNode;</td>
     <td></td>
     <td></td>
diff --git a/examples/BasicExample.tsx b/examples/BasicExample.tsx
index b132b4a..4d4e141 100644
--- a/examples/BasicExample.tsx
+++ b/examples/BasicExample.tsx
@@ -14,7 +14,8 @@ function BasicExample(props: Props) {
       <form>
         <h3>Email</h3>
         <ReactMultiEmail
-          placeholder='Input your email'
+          label='Emails'
+          placeholder='Enter your email'
           emails={emails}
           onChange={(_emails: string[]) => {
             setEmails(_emails);
diff --git a/react-multi-email/ReactMultiEmail.tsx b/react-multi-email/ReactMultiEmail.tsx
index d3ef159..1c9e897 100644
--- a/react-multi-email/ReactMultiEmail.tsx
+++ b/react-multi-email/ReactMultiEmail.tsx
@@ -23,7 +23,8 @@ export interface IReactMultiEmailProps {
   ) => React.ReactNode;
   className?: string;
   inputClassName?: string;
-  placeholder?: string | React.ReactNode;
+  label?: string | React.ReactNode;
+  placeholder?: string;
   autoFocus?: boolean;
   spinner?: () => React.ReactNode;
   delimiter?: string;
@@ -48,6 +49,7 @@ export function ReactMultiEmail(props: IReactMultiEmailProps) {
     style,
     className = '',
     noClass,
+    label,
     placeholder,
     autoFocus,
     allowDisplayName = false,
@@ -291,7 +293,7 @@ export function ReactMultiEmail(props: IReactMultiEmailProps) {
       onClick={() => emailInputRef.current?.focus()}
     >
       {spinning && spinner?.()}
-      {placeholder ? <span data-placeholder>{placeholder}</span> : null}
+      {label ? <span data-label>{label}</span> : null}
       <div
         className={'data-labels'}
         style={{ opacity: spinning ? 0.45 : 1.0, display: 'contents', flexWrap: 'inherit' }}
@@ -302,6 +304,7 @@ export function ReactMultiEmail(props: IReactMultiEmailProps) {
         id={id}
         style={{ opacity: spinning ? 0.45 : 1.0 }}
         ref={emailInputRef}
+        placeholder={placeholder}
         type='text'
         value={inputValue}
         onFocus={handleOnFocus}