onFocus

The onFocus prop allows developers to define a function to execute when the text area within the component gains focus.

The onFocus prop is triggered only when the text area is focused. To define behavior for when the text area loses focus, consider using the onBlur prop.

About onFocus

• Property: onFocus
• Type: () => void;
• Default: undefined

Demo

For instance, the background color could be changed to red upon focusing, as demonstrated in the given example.

react-multi-email

Input your Email Address

react-multi-email value

empty

Code

Full code

OnFocus.mdx

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
        // onFocus prop
        onFocus={onFocusFunc}
        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

OnFocus.tsx

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

return(
  <ReactMultiEmail
      onFocus={onFocusFunc}
      // other props
  />
);