another-emails-input v2.1.1

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("my@email.com");
    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

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>