Registry / web-framework / react-multi-email

react-multi-email

library1.0.25jsnpmunverified

`react-multi-email` is a lightweight and dependency-free React component designed for creating an input field that can manage and format multiple email addresses as a user types. Currently stable at version `1.0.25`, the library maintains a moderate release cadence, addressing bugs and adding new features such as improved handling of duplicate emails (case-insensitive) and an `inputValue` prop. Its core differentiators include a minimalist codebase, small bundle size, and straightforward customization options, allowing developers to easily integrate a robust multi-email input without significant overhead. It supports both synchronous and asynchronous email validation and offers custom label rendering for each email, making it a flexible choice for forms requiring multiple email entries.

web-framework serialization

npm install react-multi-email

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-MULTI-EMAIL

react-multi-email

web-frameworkjavascriptv1.0.25

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ReactMultiEmail

✓ import { ReactMultiEmail } from 'react-multi-email';

✗ import ReactMultiEmail from 'react-multi-email'; const ReactMultiEmail = require('react-multi-email');

This is a named export. Ensure you destructure it from the package.

isEmail

✓ import { isEmail } from 'react-multi-email';

✗ const isEmail = require('react-multi-email').isEmail;

A utility function for basic email validation, also a named export.

Component Stylesheet

✓ import 'react-multi-email/dist/style.css';

The component requires this stylesheet for correct visual rendering. Forgetting it will result in unstyled emails.

This quickstart demonstrates the basic usage of the `ReactMultiEmail` component, showing how to manage emails using React state, handle focus/blur events, and utilize custom label rendering with the included `isEmail` validator.

import * as React from 'react'; import { ReactMultiEmail, isEmail } from 'react-multi-email'; import 'react-multi-email/dist/style.css'; function BasicExample() { const [emails, setEmails] = React.useState<string[]>([]); const [focused, setFocused] = React.useState(false); return ( <form> <h3>Email Input</h3> <ReactMultiEmail placeholder='Input your email addresses' emails={emails} onChange={(_emails: string[]) => { setEmails(_emails); }} autoFocus={true} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} validateEmail={email => isEmail(email)} 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>Current Emails:</h4> <p>{emails.join(', ') || 'empty'}</p> <h3>Input Focused: {focused ? 'true' : 'false'}</h3> </form> ); } export default BasicExample;

Debug

Known issues

gotchaThe component requires a separate CSS import (`import 'react-multi-email/dist/style.css';`) for correct visual rendering. Without this import, the email tags will appear unstyled and potentially misaligned, impacting the user interface.

fix

Ensure `import 'react-multi-email/dist/style.css';` is included in your main application entry point or the component file where `ReactMultiEmail` is used.

affects: >=1.0.0

gotchaPrior to version `1.0.25`, users reported an issue where the loading spinner might not stop if the `validateEmail` prop, when returning a Promise, failed to resolve successfully. This could leave the UI in a perpetual loading state for invalid asynchronous validations.

fix

Upgrade to `react-multi-email@1.0.25` or higher, which includes a fix for this spinner behavior during asynchronous email validation failures.

affects: <1.0.25

gotchaThe `inputValue` prop was added in `v1.0.25` to provide external control over the input field's current value. While this offers greater flexibility, be mindful that introducing external control over an input can sometimes lead to unexpected side effects if not managed carefully, especially in existing codebases that might have relied on internal state for the input field.

fix

When upgrading and utilizing the `inputValue` prop, thoroughly test your component's input behavior to ensure it aligns with expectations and doesn't conflict with existing state management or event handlers.

affects: >=1.0.25

Errors

Common errors & fixes

Module not found: Can't resolve 'react-multi-email/dist/style.css' in 'path/to/your/component'

The bundler cannot locate the CSS file required for the component's styling.

fix

Verify that `react-multi-email` is correctly installed. Ensure the path `react-multi-email/dist/style.css` is accessible and that your build setup correctly handles CSS imports.

TypeError: (0 , react_multi_email__WEBPACK_IMPORTED_MODULE_1__.ReactMultiEmail) is not a function

This error typically occurs when attempting to use a CommonJS `require()` statement or an incorrect default import for `ReactMultiEmail` in an ESM context, or vice-versa.

fix

Use a named import: `import { ReactMultiEmail } from 'react-multi-email';` for ESM environments. If using CommonJS, ensure `const { ReactMultiEmail } = require('react-multi-email');` is used, though the library primarily targets modern React setups with ESM.

Emails are entered into the input field but do not format into distinct styled 'tags' or chips.

The component's essential stylesheet (`style.css`) is not being loaded or applied, resulting in a lack of visual styling for the email tags.

fix

Confirm that `import 'react-multi-email/dist/style.css';` is present and correctly imported into your application. Check your browser's developer tools to see if the stylesheet is loaded and if its styles are being applied or overridden.

Upgrade

Version history

1.0.25latest on npm

Audit

Dependencies

reactrequiredPeer dependency for rendering React components.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/axisj/react-multi-email ↗

packagehttps://www.npmjs.com/package/react-multi-email ↗