noClass

The noClass prop controls whether to apply the default class name, 'react-multi-email', to the top-level div of the component.

Setting noClass to true will prevent the default class name 'react-multi-email' from being applied. Conversely, if noClass is either set to false or left unspecified, the class 'react-multi-email' will be automatically applied to the div element.

Utilizing this prop allows users to override the default styling of the ReactMultiEmail component by deactivating the default class name, enabling the application of custom styles.

About noClass

• Property: noClass
• Type: boolean
• Default: undefined

Demo

react-multi-email

Input your Email Address

react-multi-email value

empty

info

To notice the difference, enable developer mode and inspect the class name. The absence of the default class 'react-multi-email' will result in noticeable style alterations.

Result

tip

If the text area is empty, the div element have the default class name 'empty'.

Code

Full code

NoClass.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
        // noClass prop
        noClass={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

NoClass.tsx

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