MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.
View Demo · Report Bug

There are lots of component libraries with email inputs, yet very few that focus on multi email input and vanilla js. This library adds multi email input functionality possible in your web application.

This library is the result of a code challenge. It does not include full unit-test coverage or performance optimization. Just examples of unit-tests as a confrontation piece.

This project is primarily build with

• Typescript
• PostCSS
• Webpack

For rest: see package.json

To get a local copy up and running follow these simple example steps.

1. Clone the repo

   git clone https://github.com/lhstraathof/multiple-emails-input.git

2. Duplicate meimei-lib.min.js from ./dist/
3. Import meimei-lib-min.js before the closing tag and start using it

   <div class="input-target"></div>
   <script src="./meimei-lib.min.js"></script>
   <script>
    var inputContainerNode = document.querySelectorAll('.input-target');
    var emailsInput1 = MeiMei(inputContainerNode);
   </script>

You can add options as a second parameter to MeiMei:

   <div class="input-target"></div>
   <script src="./meimei-lib.min.js"></script>
   <script>
    var customProps = {
        placeholder: 'Hi, add emails here',
    };
    var inputContainerNode = document.querySelectorAll('.input-target');
    var emailsInput1 = MeiMei(inputContainerNode, customProps);
   </script>

A custom theme with your own classes can be added, for example:

    var theme = {
        box: "custom-box-class",
        input: "custom-input-class",
        chip: "custom-chip-class",
        chipInvalid: "custom-chipInvalid-class",
        cross: "custom-cross-icon-class"
    };
    var customProps = { theme: theme };
    var inputContainerNode = document.querySelectorAll('.input-target');
    var emailsInput1 = MeiMei(inputContainerNode, customProps);

After adding MeiMei to your page and assigning it to a variable, you get access to the API and its follow methods:

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Launches the test runner (jest).

Builds the app for production to the dist folder. It correctly bundles Typescript in production mode and optimizes the build.

To see the live demo, go to https://lhstraathof.github.io/multiple-emails-input/

As this library is the result of a code challenge, there is still lots to be done:

• Proper cross browser testing (mobile)
• Make library available via NPM
• Update webpack config to export to UMD, es-module, etc.
• Deploy to CDN
• Add unit-tests additional
• Optimize performance
• Add life-cycle methods and extend API (i.e. destroy MeiMei on target)
• Add more theme's
• Optimize sanitization
• Optimize security
• Highlight entry when user presses backspace on empty input before deleting prev. entry

Distributed under the MIT License. See LICENSE for more information.

Lars Straathof - Lars.Amsterdam - mail@lars.amsterdam

Project Link: https://github.com/lhstraathof/multiple-emails-input

• Img Shields