Essential Props of ReactMultiEmail

The ReactMultiEmail component is highly versatile and customizable, designed to accommodate a variety of user needs. To harness its full potential, it is crucial to understand the three fundamental props: emails, onChange, and getLabel.

Essential Props

emails

emails prop is responsible for representing an array of email addresses.

• Property: emails
• Type: string[]
• Default: undefined

info

This prop is critical for maintaining the state of the email addresses inputted by the user.

onChange

The onChange prop is a callback function invoked whenever there is a change in the email array, receiving the updated array as its parameter.

• Property: onChange
• Type: (emails: string[]) => void
• Default: undefined

info

Leverage this callback to synchronize the email state with the user input, ensuring the component reflects the most recent user interactions.

getLabel

getLabel prop allows for customization of the display of each email tag.

• Property: getLabel
• Type: (email: string, index: number, removeEmail: (index: number) => void) => ReactNode
• Default: undefined

info

Utilize this prop to stylize each email tag individually, adding a unique flair to your component's presentation.

Demo

See the demonstration below utilizing all three essential props:

tip

Enter a valid email address and press the Enter key. To remove, press the Backspace key.

Code

EssentialProps.tsx

import React, { useState } from 'react'
import { ReactMultiEmail } from 'react-multi-email'
import 'react-multi-email/style.css'

export default function EssentialProps () {
  const [emails, setEmails] = React.useState<string[]>([]);
  return (
      <ReactMultiEmail
        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>
          );
        }}
      />
  );
}

By mastering these three essential props, you can unleash the full capabilities of the ReactMultiEmail component, ensuring a user-friendly and aesthetically pleasing email input experience.