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

Installation

1npm install react-multi-email

Usage

1import * as React from 'react';
2import { ReactMultiEmail, isEmail } from 'react-multi-email';
3import 'react-multi-email/dist/style.css';
4
5interface Props {}
6
7function BasicExample(props: Props) {
8  const [emails, setEmails] = React.useState<string[]>([]);
9  const [focused, setFocused] = React.useState(false);
10
11  return (
12    <form>
13      <h3>Email</h3>
14      <ReactMultiEmail
15        placeholder='Input your email'
16        emails={emails}
17        onChange={(_emails: string[]) => {
18          setEmails(_emails);
19        }}
20        autoFocus={true}
21        onFocus={() => setFocused(true)}
22        onBlur={() => setFocused(false)}
23        getLabel={(email, index, removeEmail) => {
24          return (
25            <div data-tag key={index}>
26              <div data-tag-item>{email}</div>
27              <span data-tag-handle onClick={() => removeEmail(index)}>
28                ×
29              </span>
30            </div>
31          );
32        }}
33      />
34      <br />
35      <h4>react-multi-email value</h4>
36      <h3>Focused: {focused ? 'true' : 'false'}</h3>
37      <p>{emails.join(', ') || 'empty'}</p>
38    </form>
39  );
40}
41
42export default BasicExample;

Props

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

License

MIT

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