Quick Start

:partying_face: Welcome to react-multi-email!
This open-source library offers a robust solution for projects requiring the entry of multiple email addresses.

• Simple code
• No dependency
• Small size
• Simple customization

👈 Many people use our open source every month.
👈 If you don't mind, please give us a ⭐

:hugging_face: Your expertise could greatly benefit both the community and the future of this project. Please consider contributing. We are always waiting for your pull request.

Getting Started

Integrate the react-multi-email feature into your project in just ⏰3 minutes!

Requirements

The project consists of the following elements. So your project should also include the following elements.

• React
• TypeScript
• Node.js : version 16 or above are recommended

Installation

You can get started immediately with the following command.

npm

npm install react-multi-email 

yarn

yarn add react-multi-email 

tip

Enter this command in the Command Prompt, PowerShell, Terminal, or any integrated terminal within your code editor.

Basic example

Refer to the Demo version to see that react-multi-email has the following form.
Type an email into the text area and press Enter to register the email address. Try it directly in the form below and press Enter.

react-multi-email

Input your Email Address

react-multi-email value

empty

Code Integration

Wondering how to import it into your project? Below is the complete code for the basic example.
The emails, onChange, getLabel are [essential props](./Props/Essential Props.mdx) for implementing react-multi-email. We'll delve deeper into props later.

Usage - Basic Example

App.tsx

import * as React from 'react';
// import react-multi-email
import { ReactMultiEmail } from 'react-multi-email';
import 'react-multi-email/dist/style.css';

export default function BasicExample () {
  const [emails, setEmails] = React.useState<string[]>([]);
  return (
    <div style={styles}>
      <h3>react-multi-email</h3>

      {/* ---ReactMultiEmail component--- */}
      <ReactMultiEmail
        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>
  );
}

// styles is not necessary to use
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",
};