className

The className prop allows you to assign an additional CSS class name to the root div element of the component. This enables easy external styling modifications to the component.

About className

• Property: className
• Type: string
• Default: ''

Demo

react-multi-email

Input your Email Address

react-multi-email value

empty

info

To verify the assigned class name, inspect the element in developer mode.
The assigned class name will be visible as depicted in the image below.

Result

tip

When the text area is empty, the div element will have the class name empty.

Code

Full code

ClassName.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
        // className prop
        className="customClassName"
        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

ClassName.tsx

<ReactMultiEmail
  className="customClassName"
  // other props...
/>