Skip to content

Latest commit

 

History

History
169 lines (120 loc) · 4.3 KB

README.md

File metadata and controls

169 lines (120 loc) · 4.3 KB
Raw

emails-input

Demo GIF

Customizeable VanillaJS email input library. Creates a token on blur, enter and comma and supports pasting comma separated values. Could be easily adapted to work for non-email values.

Example

Live Example

Getting started

Download dist/emails-input.js, dist/emails-input.css and import the files into your project.

Styles

Add EmailsInput-themed class to the container element to apply theme styles. When omitted, only base styles are applied for full styling flexibility.

Basic usage

<html>
    <head>
        <!-- Import styles -->
        <link href="emails-input.css" rel="stylesheet" />
    </head>
    <style>
        /* Specify dimensions of container element */
        .emails {
            width: 30em;
            heigth: 10em;
        }           
    </style>
    <body>
        <!-- Container component with theme styles applied -->
        <div class="emails EmailsInput-themed" id="emails-input"></div>
        <!-- Import script -->
        <script src="emails-input.js"></script>
        <!-- Initialize -->
        <script>
          var container = document.querySelector('#emails-input');
          var emailsInput = EmailsInput(container, { 
            // Options
          });
        </script>
    </body>
</html>

API

EmailsInput(elem, opts)

Construct an emails input.

EmailsInput.addValue(value)

Add a value to the list of values.

EmailsInput.getAllValues() ⇒ Array.<String>

Get all values.

EmailsInput.getValidValues() ⇒ Array.<String>

Get valid values.

EmailsInput.replaceAllValues(values)

Replace all current values by the given values.

EmailsInput.subscribe(listener)

Subscribe to any changes to the values.

EmailsInput.unsubscribe(listener)

Unsubscribe listener.

EmailsInput.init()

(Re)initialize EmailsInput instance. Renders an empty form.

EmailsInput.reset()

Reset EmailsInput instance.

Unsubscribes listeners and clears values.

EmailsInput(elem, opts)

Construct an emails input.

Param Type Description
elem HTMLElement HTML element to be bind the EmailsInput instance to.
opts Object Options
opts.placeholderText Number Input placeholder text

EmailsInput.addValue(value)

Add a value to the list of values.

Param Type Description
value string The value to be added.

EmailsInput.getAllValues() ⇒ Array.<String>

Get all values.

EmailsInput.getValidValues() ⇒ Array.<String>

Get valid values.

EmailsInput.replaceAllValues(values)

Replace all current values by the given values.

Param Type Description
values Array.<String> The new values

EmailsInput.subscribe(listener)

Subscribe to any changes to the values.

Param Type Description
listener function Listener function

EmailsInput.unsubscribe(listener)

Unsubscribe listener.

Param Type Description
listener function Listener function

EmailsInput.init()

(Re)initialize EmailsInput instance. Renders an empty form.

EmailsInput.reset()

Reset EmailsInput instance.

Unsubscribes listeners and clears values.

Contributing

This plugin is developed with Webpack 4 and Babel 7.

  • Run dev server: npm run start
  • Build: npm run build
  • Test: npm run test