Source List

A custom input field

Table of contents

Installation

CDN

  <script src="http://developer.powerpeers.com/social/1.0.0/custom-input.js" />

NPM

  npm i @ppci/custom-input

Usage

// Javascript import
import '@ppci/custom-input'
// or module import
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/custom-input.js" />

const onChange = (event) => {
  const { name, value } = event.detail;
}

const onChangeDelayed = (event) => {
  const { name, value } = event.detail;
}

<custom-input
  name='firstname'
  placeholder='First name'
  @change="${onChange}"
  @change-delayed='${onChangeDelayed}'>
</custom-input>

Properties

Events

  The value in the response reflects the current state of the input field.
</td>
<td>```{ name: 'firstname', value: 'p' }```</td>

  This could be useful to prevent too many network requests on a search box.
</td>
<td>```{ name: 'firstname', value: 'powerpeers' }```</td>

Changelog

1.0.1 ( Patch )

• Firefox style bug fix

1.0.0 ( Major )

• Initial version of the custom input field.