# react-multi-email

> [![npm version](https://badge.fury.io/js/react-multi-email.svg)](https://badge.fury.io/js/react-multi-email) [![](https://img.shields.io/npm/dm/react-multi-email.svg)](https://www.npmjs.com/package/react-multi-email) [![](https://github.com/axisj/react-mu

Latest version **1.0.26** (published 2026-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-multi-email
pnpm add react-multi-email
yarn add react-multi-email
bun add react-multi-email
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.26 |
| Published | 2026-09-01 |
| First published | 2018-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=24.x |
| Dependencies | 0 |
| Unpacked size | 130.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 315 |
| Maintainers | gimdongwoo, thomasjang |

## Links

- npm: https://www.npmjs.com/package/react-multi-email
- Repository: https://github.com/axisj/react-multi-email
- Homepage: https://github.com/axisj/react-multi-email#readme
- Issues: https://github.com/axisj/react-multi-email/issues
- npm.io page: https://npm.io/package/react-multi-email

## Recent versions

- 1.0.26 (latest) — 2026-09-01
- 1.0.25 — 2024-07-18
- 1.0.24 — 2024-07-17
- 1.0.23 — 2024-03-20
- 1.0.22 — 2024-03-05
- 1.0.21 — 2024-02-14
- 1.0.20 — 2024-02-06
- 1.0.19 — 2023-11-24
- 1.0.18 — 2023-10-28
- 1.0.17 — 2023-10-23
- 1.0.16 — 2023-08-14
- 1.0.15 — 2023-08-11
- 1.0.14 — 2023-07-24
- 1.0.13 — 2023-07-19
- 1.0.12 — 2023-07-10
- … 33 more at https://npm.io/package/react-multi-email/versions

## README

[![npm version](https://badge.fury.io/js/react-multi-email.svg)](https://badge.fury.io/js/react-multi-email)
[![](https://img.shields.io/npm/dm/react-multi-email.svg)](https://www.npmjs.com/package/react-multi-email)
[![](https://github.com/axisj/react-multi-email/actions/workflows/npm-test.yml/badge.svg)](https://github.com/axisj/react-multi-email/actions/workflows)

# react-multi-email

A simple react component to format multiple email as the user types.

- Simple code
- No dependency
- Small size
- Simple customization

[See Demo](https://codesandbox.io/s/jpvjk8m5o9)



<img src="https://cdn.rawgit.com/axui/react-multi-email/c3098f94/react-multi-email.gif" />

## Installation

```shell-script
npm install react-multi-email
```

## Usage

```typescript jsx
import * as React from 'react';
import { ReactMultiEmail, isEmail } from 'react-multi-email';
import 'react-multi-email/dist/style.css';

interface Props {}

function BasicExample(props: Props) {
  const [emails, setEmails] = React.useState<string[]>([]);
  const [focused, setFocused] = React.useState(false);

  return (
    <form>
      <h3>Email</h3>
      <ReactMultiEmail
        placeholder='Input your email'
        emails={emails}
        onChange={(_emails: string[]) => {
          setEmails(_emails);
        }}
        autoFocus={true}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        getLabel={(email, index, removeEmail) => {
          return (
            <div data-tag key={index}>
              <div data-tag-item>{email}</div>
              <span data-tag-handle onClick={() => removeEmail(index)}>
                ×
              </span>
            </div>
          );
        }}
      />
      <br />
      <h4>react-multi-email value</h4>
      <h3>Focused: {focused ? 'true' : 'false'}</h3>
      <p>{emails.join(', ') || 'empty'}</p>
    </form>
  );
}

export default BasicExample;
```

## Props

<table>
  <tr>
    <th>Property</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>id</td>
    <td>string</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>emails</td>
    <td>string[]</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>onChange</td>
    <td>(emails: string[]) => void;</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>enable</td>
    <td>({ emailCnt }: { emailCnt: number }) => boolean;</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>onDisabled</td>
    <td>() => void;</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>onChangeInput</td>
    <td>(value: string) => void;</td>
    <td></td>
    <td></td>
  </tr>
  
  <tr>
    <td>onFocus</td>
    <td>() => void;</td>
    <td></td>
    <td></td>
  </tr>
  
  <tr>
    <td>onBlur</td>
    <td>() => void;</td>
    <td></td>
    <td></td>
  </tr>
  
  <tr>
    <td>onKeyDown</td>
    <td>(evt: React.KeyboardEvent<HTMLInputElement>) => void;</td>
    <td></td>
    <td></td>
  </tr>
  
  <tr>
    <td>onKeyUp</td>
    <td>(evt: React.KeyboardEvent<HTMLInputElement>) => void;</td>
    <td></td>
    <td></td>
  </tr>
  
  <tr>
    <td>noClass</td>
    <td>boolean</td>
    <td></td>
    <td></td>
  </tr>
  
  <tr>
    <td>validateEmail</td>
    <td>(email: string) => boolean | Promise<boolean>;</td>
    <td></td>
    <td></td>
  </tr>
  
  <tr>
    <td>enableSpinner</td>
    <td>boolean</td>
    <td></td>
    <td></td>
  </tr>
  
  <tr>
    <td>style</td>
    <td>React.CSSProperties</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>getLabel</td>
    <td>
  (
    email: string,
    index: number,
    removeEmail: (index: number, isDisabled?: boolean) => void,
  ) => React.ReactNode;
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
    className</td>
    <td>string</td>
    <td>''</td>
    <td></td>
  </tr>
  <tr>
    <td>
    inputClassName</td>
    <td>string</td>
    <td>''</td>
    <td></td>
  </tr>
  <tr>
    <td>
    placeholder</td>
    <td>string | React.ReactNode;</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
    autoFocus</td>
    <td>boolean;</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
    spinner</td>
    <td>() => React.ReactNode;</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
    delimiter</td>
    <td>string;</td>
    <td>'[ ,;]'</td>
    <td></td>
  </tr>
  <tr>
    <td>
    autoComplete</td>
    <td>string | undefined</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>initialInputValue</td>
    <td>string | undefined</td>
    <td>''</td>
    <td></td>
  </tr>
  <tr>
    <td>
    disableOnBlurValidation</td>
    <td>boolean | undefined</td>
    <td>false</td>
    <td></td>
  </tr>  
  <tr>
    <td>inputValue</td>
    <td>string | undefined</td>
    <td>undefined</td>
    <td></td>
  </tr>
</table>

## License

[MIT](https://opensource.org/licenses/MIT)

> If you don't mind, don't forget to press "star" before leaving.

---
_Source: https://npm.io/package/react-multi-email · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._