A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input

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

About The Project

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.

Built With

This project is primarily build with

• Typescript
• PostCSS
• Webpack

For rest: see package.json

Getting Started

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

Installation

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>

Options

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

API

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

Usage

In the project directory, you can run:

npm run start

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.

npm run test

Launches the test runner (jest).

npm run build

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

Example

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

TODO

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

License

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

Contact

Lars Straathof - Lars.Amsterdam - [email protected]

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

Acknowledgements

• Img Shields