autoFocus

The autoFocus prop enables automatic focusing on the text area as soon as the page loads.

When set to true, as demonstrated in the above code, the text area will be automatically focused upon.

About autoFocus

• Property: autoFocus
• Type: boolean
• Default: undefined

Demo

react-multi-email

Input your Email Address

react-multi-email value

empty

Must check!

This page is configured with mdx and may not appear to be working. To check the function, set it up directly in demo or reload the page via F5 or Ctrl(Command)+Shift+R.

Code

Full code

AutoFocus.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
        // autoFocus prop
        autoFocus={true}
        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

AutoFocus.tsx

<ReactMultiEmail 
  autoFocus={true}
  // other props...
/>