id

In ReactMultiEmail component, the id prop corresponds to the id attribute in HTML, universally utilized to grant a unique identifier to each HTML element on a webpage. It’s crucial that each id within a page is unique to prevent conflicts and ensure proper element identification.

The id prop in ReactMultiEmail is designated to assign a unique identifier to the input element rendered by the component.

About id

• Property: id
• Type: string
• Default: undefined

Demo

react-multi-email

Input your Email Address

react-multi-email value

empty

Result

info

The id assigned as a prop is reflected in the input box.

Code

Full code

Id.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
        // id prop
        id="email_field"
        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

Id.tsx

<ReactMultiEmail
  id="email_field"
  // other props...
/>

Practical Uses of id Prop

Within the ReactMultiEmail component, the id prop is predominantly used for:

1. DOM Manipulation & Query: Direct manipulation or querying a DOM element using JavaScript often requires the use of the id prop to access specific elements easily.
2. Styling and Scripting: The id prop can target a specific input element for the application of CSS styles or the execution of JavaScript functions.
3. Label Association: By employing the id value, a label element can be associated with an input field, enhancing user experience by enabling the focusing of the corresponding input field through label interaction.