style

The style prop allows you to easily apply your custom styles to the text area within the ReactMultiEmail component, enhancing its aesthetic appeal and ensuring consistency with your application's design theme.

About style

• Property: style
• Type: boolean
• Default: undefined

Demo

The example below demonstrates how to add border, marginLeft, and width styles to the text area.

react-multi-email

Input your Email Address

react-multi-email value

empty

Code

Full code

Style.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
        // style prop
        style={{ border: '1px solid red', marginLeft: '1rem', width: '300px' }}
        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

Style.tsx

<ReactMultiEmail 
  style={{ YOUR OWN STYLE }}
  // other props...
/>