spinner

The ReactMultiEmail component offers the spinner prop to visually signify the loading status to users, specifically during the asynchronous validation of email addresses (i.e., when validateEmail returns a Promise).

However, this spinner is only operational when the enableSpinner is assigned true. By utilizing the spinner function, developers have the flexibility to render a custom loading interface, enhancing the user's experience during the wait.

About spinner & enableSpinner

spinner

• Property: spinner
• Type: () => React.ReactNode
• Default: undefined

enableSpinner

• Property: enableSpinner
• Type: boolean
• Default: undefined

Demo

react-multi-email

Input your Email Address

react-multi-email value

empty

caution

The demonstrated asynchronous validation is not connected to a live API. Therefore, entering an email will cause the spinner to run indefinitely.

Code

Full code

Spinner.tsx

import * as React from 'react';
import { ReactMultiEmail } from 'react-multi-email';
import 'react-multi-email/dist/style.css';

export default function multiEmail() {
  const [emails, setEmails] = React.useState<string[]>([]);

  const validateEmailFunc = async (email: string) => {
    try {
      const response = await fetch(`https://api.example.com/validate-email?email=${email}`);
      const data = await response.json();
      return data.isValid;
    } catch (error) {
      return false;
    }
  };

  return (
    <div style={styles}>
      <h3>react-multi-email</h3>
      <ReactMultiEmail
        // enableSpinner & spinner props
        enableSpinner={true}
        spinner={() => <div>Loading...</div>}
        validateEmail={validateEmailFunc}
        placeholder="Input your Email Address"
        emails={emails}
        onChange={(_emails: string[]) => {
          setEmails(_emails);
        }}
        getLabel={(
          email: string,
          index: number,
          removeEmail: (index: number) => void
        ) => {
          return (
            <div data-tag key={index}>
              {email}
              <span data-tag-handle onClick={() => removeEmail(index)}>
                ×
              </span>
            </div>
          );
        }}
      />
      <h4>react-multi-email value</h4>
      <p>{emails.join(", ") || "empty"}</p>
    </div>
  );
}

const styles = {
  fontFamily: "sans-serif",
  width: "500px",
  border: "1px solid rgb(238, 238, 238)",
  background: "rgb(243, 243, 243)",
  padding: "25px",
  margin: "20px",
  color: "black",
};

Code snippet

Spinner.tsx

<ReactMultiEmail
  enableSpinner={true}
  spinner={()=>{ return(<div>Loading...</div>)}}
  // you must need validation fuction on Promise
  // other props...
/>