Quick Start

:partying_face: Welcome to react-multi-email!
This open source will provide a good solution for your project to enter multiple email addresses.

Getting Started

You can apply react-multi-email feature to project in ⏰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

You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.

Basic example

As you can see in the Demo version, react-multi-mail has the following form. Enter an email in the text area and press Enter to register that email address. Type directly into the form below and press Enter.

react-multi-email

Input your Email Address

react-multi-email value

empty

Code

How it can be imported into your project? The following code is the full code for the basic example.
emails, onChange, getLabel are an essential props in implementing react-multi-email.
We'll find out more about 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>

      // react-multi-email 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",
};