Small vanilla javascript emails-editor library.

The library Allows to collect and delete emails using an input editor.

• An email will be added into the editor when the user:
  • Press Enter
  • Press Comma
  • Input lose focus
• Supports pasting emails, separated by commas
• Each email entry is validated, if the email is wrong it will be marked as invalid and the corresponding CSS class will be added
• The library does not have external dependencies on production
• The library offers a Public API to add an email and get current emails

Check out the example link

1. Download the dist/ folder

2. Include the script

<script src="./dist/emailsEditor.bundle.js"></script>

3. Include the styles: Minimum CSS needed to add styles to each email

<link rel="stylesheet" href="./dist/emailsEditor.css" />

Now you will have available in the window a global variable called EmailsInput

Add in your project

<div id="emails-input"></div>

<script>
  const inputContainerNode = document.querySelector('#emails-input');

  const emailsInput = EmailsInput(inputContainerNode);
</script>

The library is compatible with ie11 and the latest browsers versions

This is an HTML element that will be used to initialize the library

Optionally you can pass a callback function that will be triggered when there is a new/update email entry in the EmailsInput library.

With the instance created, you can access the emails data collected using this function

<script>
  const inputContainerNode = document.querySelector('#emails-input');

  const emailsInput = EmailsInput(inputContainerNode);
  const emailList = emailsInput.getEmails();
  console.log(emailList);
</script>

<script>
  const inputContainerNode = document.querySelector('#emails-input');

  const emailsInput = EmailsInput(inputContainerNode);
  const newEmail = emailsInput.add('test@mail.com');
  const emailList = emailsInput.getEmails();
  console.log(emailList);
</script>

• Vanilla Email Form: Source | Demo

• Multiple Emails Editor: Source | Demo

See CONTRIBUTING.md

• Publish library as an npm package, to avoid downloading the dist folder
• Extend unit test
• Include e2e tests

👤 Alexandra Vargas

• Twitter: @axelav
• Github: @axelavargas
• LinkedIn: @axelav