enable

The enable prop determines whether a user can add an email. Here, the emailCnt parameter signifies the number of added emails. When the function returns true, an email is permissible for addition, but if it renders false, email addition is restricted.

About enable

• Property: enable
• Type: ({ emailCnt }: { emailCnt: number }) => boolean;
• Default: undefined

Demo

The subsequent example restricts the addition of more than two (2) emails. You can be customized to any numeric value as per requirements.

react-multi-email

Input your Email Address

react-multi-email value

empty

Code

Full code

Enable.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[]>([]);
  return (
    <div style={styles}>
      <h3>react-multi-email</h3>
      <ReactMultiEmail
        // enable prop
        enable={({ emailCnt }) => emailCnt < 2}
        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

Enable.tsx

<ReactMultiEmail 
  enable={({ emailCnt }) => emailCnt < 2 }
  // other props...
/>