placeholder

The placeholder prop is a fundamental feature that serves to offer guidance within the text area, acting as suggestive text to aid users in interacting with the component.

To employ this feature, simply assign a string to the placeholder prop.

About placeholder

• Property: placeholder
• Type: string | React.ReactNode
• Default: undefined

Demo

react-multi-email

Type anything!

react-multi-email value

empty

Code

Full code

Placeholder.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
        // placeholder prop
        placeholder="Type anything!"
        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

Placeholder.tsx

<ReactMultiEmail
    placeholder="Type anything!"
    // other props...
/>