validateEmail

The validateEmail prop in the ReactMultiEmail component is designed for validating the entered email addresses.

While the component provides a basic email validation out of the box (see isEmail.tsx), the validateEmail prop allows you to implement your own custom validation logic to accommodate specific criteria or scenarios.

The function provided to validateEmail can either return a boolean value synchronously or a Promise for asynchronous operations.

About validateEmail

• Property: validateEmail
• Type: (email: string) => boolean | Promise;
• Default: undefined

Demo

react-multi-email

Input your Email Address

react-multi-email value

empty

info

Experiment with the provided examples: if the first element of the email (ID) is capitalized, or if the third element of the email (TLD) has more than four characters, it will not be added. Give it a try!

regular expressions

To understand the used regular expressions better, refer to the following resources:
Regular Expression Tutorial(w3schools)
Regular Expression Test Site(regexr)

Code

Full code

ValidateEmail.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 = (email: string) => {
    const emailPattern = /^[a-z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    return emailPattern.test(email);
  };

  return (
    <div style={styles}>
      <h3>react-multi-email</h3>
      <ReactMultiEmail
        // validateEmail prop
        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

ValidateEmail.tsx

const validateEmailFunc = (email: string) => {
  // do something
  // return true or false
};

<ReactMultiEmail
  validateEmail={validateEmailFunc}
  // other props...
/>

Code snippet (async)

ValidateEmail.tsx

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;
  }
};

<ReactMultiEmail
  validateEmail={validateEmailFunc}
  // other props...
/>

info

For asynchronous validations, the async and await can be used as shown in the example above, enabling the use of the spinner prop for visual feedback during the validation process.