onDisabled

The onDisabled prop is a callback function triggered when the enable function evaluates to false. It enables developers to define specific actions to execute when a user is prevented from adding an email, enhancing user feedback and interaction within the application.

About onDisabled

• Property: onDisabled
• Type: () => void
• Default: undefined

Demo

Here's an example where a notification message is sent to the user, informing them of the restriction when the enable function returns false.

react-multi-email

Input your Email Address

react-multi-email value

empty

Code

Full code

OnDisabled.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 onDisabledFunc = () => {
    alert("You can't add more emails!");   
  }
  
  return (
    <div style={styles}>
      <h3>react-multi-email</h3>
      <ReactMultiEmail
        // onDisabled prop
        onDisabled={() => onDisabledFunc()}
        placeholder="Input your Email Address"
        enable={({ emailCnt }) => emailCnt < 2}
        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

OnDisabled.tsx

const onDisabledFunc = () => {
  // do something
}

<ReactMultiEmail 
  onDisabled={() => onDisabledFunc()}
  // other props...
/>

info

The onDisabled prop is commonly used in conjunction with the enable prop to manage user interactions and restrictions effectively.