another-emails-input

another-emails-input is a fancy alternative for <input type="email" multiple>.

Features

• Easily adding and removing emails.
• Automatically validating emails
• Easy API to use and to control
• No dependency

Demo

Demo page

installation

another-emails-input is available as an npm package.

npm install another-emails-input

Usage

Using the component as a global function.

<script src="node_modules/another-emails-input/dist/emailInput.js"></script>
<div id="emails-input"></div>
<script>
    var container = document.getElementById('emails-input');
    var myEmailInput = EmailInput(container, { name:"my-email-input" });
    myEmailInput.addEmail("[email protected]");
    var count = myEmailInput.getValidEmailsCount();
    var list = myEmailInput.getValidEmails();
    // remove the first item from the list;
    myEmailInput.getItems()[0].remove();
</script>

Using the component in forms

<form onsubmit="onSubmit(event)">
    <label>first name:</label>
    <input name="first-name" />
    <label>Emails</label>
    <div id="emails-input"></div>
</form>
<script>
    EmailInput(document.getElementById('emails-input'), { name:"emails-input" });
    function onSubmit(event){
        var form = event.target;
        console.log({
            firstName: form['first-name'].value,
            emails: form['emails-input'].value,
        })
    }
</script>

using the component as a module

import EmailInput from 'another-emails-input';

function onChange(emails){
    console.log(emails)
}

const { addEmail, getValidEmailsCount, getValidEmails, getItems } = EmailInput(container, { name: 'my-email-input', onChange });

Parameters

• container : Dom element - the component will be append to it.
• options : extra options.

Options

| name | type | default | description |------|------|---------|------------ | name | string| '' | input element name for sending data as form-data or reding input value in submit function | list | string[]| [] | the initial emails list | placeholder | 'add more people...' |string | the place holder text | validator | (string)=>boolean | general email validator | overriding default email validator and pass your function | baseClass | random name |string| override default style by passing base-class - Note: the component doesn't support partial styling at the current version. So you should take care of all stylings if you pass baseClass | onChange | (string[])=>void | null | Email changes callback, you might need this functionality if you want to use the component in UI frameworks,

Output

the component return a tuple with folwoing items

• addEmail : it adds email to the component (string)=> void
• getValidEmailsCount : it returns emails count ()=> number
• getValidEmails : it returns emails as an list ()=>string[]
• getItems : it returns all items as an list ()=>Array<{email:string, isValid: boolean, remove:()=>void}> Note: remove is a function to remove an item form the component

Custom styling

By passing baseClass to the component you can override the default style. use the following classes to apply the custom style.

• ei-component-wrapper : main component wrapper
• ei-email-input : the email input
• ei-emails-wrapper: emails part wrapper
• ei-email-block : each email block
• ei-email-block.invalid: invalid email block
• ei-text : email block text
• ei-close: close icon
• ei-text-input: main text input

<style>
    .my-base-class .ei-component-wrapper {
        background: red;
    }
</style>
<script>
    var myEmailInput = EmailInput(container, { name:"my-email-input", baseClass: 'my-base-class' });
</script>