Skip to content
:octocat: A simple react component to format multiple email as the user types.
Branch: master
Clone or download
Latest commit 5ad4231 Mar 1, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist v0.5.0 Mar 1, 2019
docs v0.5.0 Mar 1, 2019
public update docs & 0.2.0 Apr 30, 2018
scripts v0.4.3 Nov 29, 2018
src v0.5.0 Mar 1, 2019
.env.development init project Apr 28, 2018
.env.production rebuild docs Apr 29, 2018
.gitignore init project Apr 28, 2018
.prettierignore init project Apr 28, 2018
.prettierrc init project Apr 28, 2018
LICENSE add license, update readme Apr 29, 2018
README.md v0.5.0 Mar 1, 2019
config-overrides.js Change tag Aug 29, 2018
package-lock.json v0.4.3 Nov 29, 2018
package.json v0.5.0 Mar 1, 2019
react-app-rewire-typescript-hmr.js init project Apr 28, 2018
react-multi-email.gif add license, update readme Apr 29, 2018
tsconfig.dev.json init project Apr 28, 2018
tsconfig.json add es6 build configuration Apr 30, 2018
tsconfig.test.json init project Apr 28, 2018
tslint.json init project Apr 28, 2018

README.md

npm version

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

npm install react-multi-email -S

Usage

import * as React from 'react';
import { ReactMultiEmail, isEmail } from 'react-multi-email';
import 'react-multi-email/style.css';

interface IProps {}
interface IState {
  emails: string[];
}
class Basic extends React.Component<IProps, IState> {
  state = {
    emails: [],
  };

  render() {
    const { emails } = this.state;

    return (
      <>
        <h3>Email</h3>
        <ReactMultiEmail
          placeholder="placeholder"
          emails={emails}
          onChange={(_emails: string[]) => {
            this.setState({ emails: _emails });
          }}
          validateEmail={email => {
            return isEmail(email); // return boolean
          }}
          getLabel={(
            email: string,
            index: number,
            removeEmail: (index: number) => void,
          ) => {
            return (
              <div data-tag key={index}>
                {email}
                <span data-tag-handle onClick={() => removeEmail(index)}>
                  ×
                </span>
              </div>
            );
          }}
        />
        <br />
        <h4>react-multi-email value</h4>
        <p>{emails.join(', ') || 'empty'}</p>
      </>
    );
  }
}

export default Basic;

License

MIT

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

You can’t perform that action at this time.