Skip to content

:octocat: A simple react component to format multiple email as the user types.

License

Notifications You must be signed in to change notification settings

mazedesignhq/react-multi-email

 
 

Repository files navigation

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 } 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 });
          }}
          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.

About

:octocat: A simple react component to format multiple email as the user types.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 47.6%
  • Less 37.8%
  • CSS 4.9%
  • JavaScript 4.9%
  • HTML 4.8%