mr-emails-input

@mr/emails-input

Zero-dependency reusable emails input component.

• IE 11 + latest versions of modern browsers

Index

• Installation
• Customization
• API Reference
• Development

Installation

• Include UMD bundle to the document:

<script src="./node_modules/@mr/emails-input/dist/emails-input.umd.js"></script>

// (Optional) TypeScript support
import type EmailsInput from "@mr/emails-input/dist/index"

declare global {
    interface Window {
        mrEmailsInput: typeof EmailsInput
    }
}

// Library would be exposed as `mrEmailsInput`
const emailsInput = window.mrEmailsInput.render(app)

• Or using bundlers:

import { render } from "@mr/emails-input"

Customization

Visual customization is possible using css overrides:

#root {
  .mr-emails-input {
    color: white;
    background: black;
  }

  .mr-email-label {
    color: black;
    background: lightgray;
  }

  .mr-email-label--invalid {
    border-bottom: 1px solid red;
  }
}

API Reference

Provides API to initialize emails-input component and access & update its state.

const app = document.getElementById("root")
const emailsInput = window.mrEmailsInput.render(app)

emailsInput.getAll() // ["[email protected]", "invalid@"]
emailsInput.getValid() // ["[email protected]"]

emailsInput.add("[email protected]")
emailsInput.remove("invalid@")

emailsInput.destroy()

Constructors

• constructor

Accessors

• value

Methods

• add
• destroy
• getAll
• getValid
• remove

Constructors

constructor

+ new EmailsInputApi(node: Element): EmailsInputApi

Renders component into provided node

Parameters:

Name	Type	Description
node	Element	target element

Returns: EmailsInputApi

Defined in: emails-input-api.ts:22

Accessors

value

• get value(): string[]

Returns the list of all typed emails

alias EmailsInputApi.getAll

Returns: string[]

Defined in: emails-input-api.ts:42

Methods

add

▸ add(email: string): void

Adds provided email to the input

Parameters:

Name	Type	Description
email	string	email to add

Returns: void

Defined in: emails-input-api.ts:69

---

destroy

▸ destroy(): void

Destroys component and removes it from the DOM

Returns: void

Defined in: emails-input-api.ts:85

---

getAll

▸ getAll(): string[]

Returns the list of all typed emails

alias EmailsInputApi.value

Returns: string[]

Defined in: emails-input-api.ts:51

---

getValid

▸ getValid(): string[]

Returns the list of all typed emails that are valid

NOTE: Only simple email validation is performed

Returns: string[]

Defined in: emails-input-api.ts:60

---

remove

▸ remove(email: string): void

Removes provided email from the input

Parameters:

Name	Type	Description
email	string	email to remove

Returns: void

Defined in: emails-input-api.ts:78

Development

Prerequisites

• Node & npm

Launch development sandbox

npm start