A JavaScript Library to Create Input Fields That Accept Multiple Email Addresses

MeiMei is an easy-to-use Vanilla JavaScript library to create input fields that accept multiple email addresses. An advanced email inputs component that allows you to insert multiple emails into an email inbox just like tags.

There are lots of component libraries with email inputs, but few focus on multiple email inputs and vanilla js. This library adds multiple possible email input functions to your web application.

How to make use of it:

1. Include the meimei-lib.min.js on the web page.

<script src="dist/meimei-lib.min.js"></script>

2. Create a container to hold the e-mail input.

<div class="emailInput"></div>

3. Initialize the element and also you’re achieved.

var inputContainer = document.querySelectorAll('.emailInput');
var emailsInput = MeiMei(inputContainer);

4. Set the placeholder for the e-mail input.

var emailsInput = MeiMei(inputContainer,{
    placeholder: 'Add More Emails Here...'
});

5. Callback capabilities.

var emailsInput = MeiMei(inputContainer,{
    onAddEntry: function onAddEntry() {
      console.log('add');
    },
    onRemoveEntry: function onRemoveEntry() {
      console.log('remove');
    },
});

6. Apply customized classes to the e-mail input.

var emailsInput = MeiMei(inputContainer,{
    theme: {
      box: "email-box-class",
      input: "input-class",
      chip: "chip-class",
      chipInvalid: "invalid-class",
      cross: "cross-icon-class"
    }
});

7. API strategies.

// add a new email address string
emailsInput.addEntry(emailAddress);

// removes an email address
emailsInput.removeEntry(emailAddress);

// returns an array of email addresses
emailsInput.entryList();

// returns the reference to the input field
emailsInput.inputFieldRef();

// returns the reference to the input container
emailsInput.ref();

// optional settings
emailsInput.optionalProps({});

Options

Name	Type	Description	Default
placeholder	string	The placeholder tekst for the input field	add more people…
onAddEntry	function	Triggers after adding an entry
onRemoveEntry	function	Triggers after removing an entry
theme	object	You can overwrite the default classes with your own theme