{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-multi-email"],"cli":null},"imports":["import { ReactMultiEmail } from 'react-multi-email';","import { isEmail } from 'react-multi-email';","import 'react-multi-email/dist/style.css';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}