onBlur

The onBlur prop is designed to execute a specified function when the text area of the component loses focus, making it typically paired with the onFocus prop for comprehensive focus management.

About onBlur

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

Demo

react-multi-email

Input your Email Address

react-multi-email value

empty

Code

Full code

OnBlur.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 [background, setBackground] = React.useState(styles.background);

  const onFocusFunc = () => {
    setBackground("#c32424");
  }
  const onBlurFunc = () => {
    setBackground(styles.background);
  }

  const combinedStyles = {
    ...styles,
    background: background
  };

  
  return (
    <div style={combinedStyles}>
      <h3>react-multi-email</h3>
      <ReactMultiEmail
        // onBlur prop
        onBlur={onBlurFunc}
        placeholder="Input your Email Address"
        onFocus={onFocusFunc}
        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

OnBlur.tsx

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

return(
  <ReactMultiEmail
      onBlur={onBlurFunc}
      // other props...
  />
);