/emails-input

Reusable UI component example

Primary LanguageTypeScriptMIT LicenseMIT

emails-input

A simple reusable component for e-mail addresses integrated on a demo page. Published on https://sheff146.github.io/emails-input/.

Requirements are described in this document. Design can be found here.

Main features

  1. No 3rd party dependencies
  2. Reusability
  3. Cross-browser support (IE 11, Edge, Safari, Firefox, Opera, Chrome)
  4. Simple API

Usage

Include component script on the page.

<script src="emails-input.js"></script>

It will add it's unique styles to document head and export EmailsInput function to window object.

After that, you will be able to start using it.

// Component will be rendered inside of this element
var wrapper = document.getElementById("input-wrapper");
// Create an instance of component
var emailsInput = new EmailsInput(wrapper);

API

Component has several API methods for communication with the host page.

replaceEmails(emails)

Takes array of strings and replaces all rendered e-mails with new ones.

var newEmails = ["abc@example.com", "1234@gmail.com"]
emailsInput.replaceAllEmails(newEmails);

getAllEmails()

Returns an array of currently rendered e-mails with validity status.

var emails = emailsInput.getAllEmails();
console.log(emails); // [{ value: "abc@example.com", isValid: true }, { value: "1234.gmail.com", isValid: false }]

subscribe(callback)

Notifies about changes by calling the callback function. Returns a subscription object.

var subscription = emailsInput.subscribe(function(changes) {
  console.log(changes); // { addedItems: [{ value: "abc@example.com", isValid: true }], removedItems: [{ value: "1234.gmail.com", isValid: false }] }
});
// Unsubscribe to not receive updates anymore
subscription.unsubscribe();