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 -S

Usage

1import * as React from 'react';
2import { ReactMultiEmail, isEmail } from 'react-multi-email';
3import 'react-multi-email/style.css';
4
5interface IProps {}
6interface IState {
7  emails: string[];
8}
9class Basic extends React.Component<IProps, IState> {
10  state = {
11    emails: [],
12  };
13
14  render() {
15    const { emails } = this.state;
16
17    return (
18      <>
19        <h3>Email</h3>
20        <ReactMultiEmail
21          placeholder="placeholder"
22          emails={emails}
23          onChange={(_emails: string[]) => {
24            this.setState({ emails: _emails });
25          }}
26          validateEmail={email => {
27            return isEmail(email); // return boolean
28          }}
29          getLabel={(
30            email: string,
31            index: number,
32            removeEmail: (index: number) => void,
33          ) => {
34            return (
35              <div data-tag key={index}>
36                {email}
37                <span data-tag-handle onClick={() => removeEmail(index)}>
38                  ×
39                </span>
40              </div>
41            );
42          }}
43        />
44        <br />
45        <h4>react-multi-email value</h4>
46        <p>{emails.join(', ') || 'empty'}</p>
47      </>
48    );
49  }
50}
51
52export default Basic;

License

MIT

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