{"id":11757,"library":"react-multi-email","title":"React Multi Email Input Component","description":"`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.","status":"active","version":"1.0.25","language":"javascript","source_language":"en","source_url":"https://github.com/axisj/react-multi-email","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-multi-email","lang":"bash","label":"npm"},{"cmd":"yarn add react-multi-email","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-multi-email","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"This is a named export. Ensure you destructure it from the package.","wrong":"import ReactMultiEmail from 'react-multi-email';\nconst ReactMultiEmail = require('react-multi-email');","symbol":"ReactMultiEmail","correct":"import { ReactMultiEmail } from 'react-multi-email';"},{"note":"A utility function for basic email validation, also a named export.","wrong":"const isEmail = require('react-multi-email').isEmail;","symbol":"isEmail","correct":"import { isEmail } from 'react-multi-email';"},{"note":"The component requires this stylesheet for correct visual rendering. Forgetting it will result in unstyled emails.","wrong":null,"symbol":"Component Stylesheet","correct":"import 'react-multi-email/dist/style.css';"}],"quickstart":{"code":"import * as React from 'react';\nimport { ReactMultiEmail, isEmail } from 'react-multi-email';\nimport 'react-multi-email/dist/style.css';\n\nfunction BasicExample() {\n  const [emails, setEmails] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState(false);\n\n  return (\n    <form>\n      <h3>Email Input</h3>\n      <ReactMultiEmail\n        placeholder='Input your email addresses'\n        emails={emails}\n        onChange={(_emails: string[]) => {\n          setEmails(_emails);\n        }}\n        autoFocus={true}\n        onFocus={() => setFocused(true)}\n        onBlur={() => setFocused(false)}\n        validateEmail={email => isEmail(email)}\n        getLabel={(email, index, removeEmail) => {\n          return (\n            <div data-tag key={index}>\n              <div data-tag-item>{email}</div>\n              <span data-tag-handle onClick={() => removeEmail(index)}>\n                ×\n              </span>\n            </div>\n          );\n        }}\n      />\n      <br />\n      <h4>Current Emails:</h4>\n      <p>{emails.join(', ') || 'empty'}</p>\n      <h3>Input Focused: {focused ? 'true' : 'false'}</h3>\n    </form>\n  );\n}\n\nexport default BasicExample;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to `react-multi-email@1.0.25` or higher, which includes a fix for this spinner behavior during asynchronous email validation failures.","message":"Prior 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.","severity":"gotcha","affected_versions":"<1.0.25"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.25"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The bundler cannot locate the CSS file required for the component's styling.","error":"Module not found: Can't resolve 'react-multi-email/dist/style.css' in 'path/to/your/component'"},{"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.","cause":"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.","error":"TypeError: (0 , react_multi_email__WEBPACK_IMPORTED_MODULE_1__.ReactMultiEmail) is not a function"},{"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.","cause":"The component's essential stylesheet (`style.css`) is not being loaded or applied, resulting in a lack of visual styling for the email tags.","error":"Emails are entered into the input field but do not format into distinct styled 'tags' or chips."}],"ecosystem":"npm"}