Skip to content

@koddsson koddsson released this Aug 14, 2019 · 1 commit to master since this release

<remote-input> element

An input element that sends its value to a server endpoint and renders the response body.

Installation

$ npm install @github/remote-input-element

Usage

import '@github/remote-input-element'
<!-- Filter a list of items from the server -->
<remote-input src="/query" aria-owns="results">
  <input>
</remote-input>
<ul id="results"></ul>

A GET request will be sent to /query?q=${input.value}.

The parameter name (q) is customizable with the [param] attribute:

<!-- Live preview of Markdown -->
<remote-input src="/preview" aria-owns="md-preview" param="body">
  <textarea></textarea>
</remote-input>
<div id="md-preview"></div>

Styling loading state

A boolean [loading] attribute is added to <remote-input> when a network request begins and removed when it ends.

.loading-icon { display: none; }
remote-input[loading] .loading-icon { display: inline; }

Events

const remoteInput = document.querySelector('remote-input')

// Network request lifecycle events.
remoteInput.addEventListener('loadstart', function(event) {
  console.log('Network request started', event)
})
remoteInput.addEventListener('loadend', function(event) {
  console.log('Network request complete', event)
})
remoteInput.addEventListener('load', function(event) {
  console.log('Network request succeeded', event)
})
remoteInput.addEventListener('error', function(event) {
  console.log('Network request failed', event)
})

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

Assets 2
  • Merge pull request #8 from github/publish-to-gpr-as-well b24d7b5
  • publish to GPR as a postpublish step 7923480

v0.0.6...v0.0.7

Assets 2

@koddsson koddsson released this Jul 31, 2019 · 3 commits to master since this release

  • Merge pull request #7 from github/dependabot/npm_and_yarn/lodash-4.17.15 31dcc69
  • Bump lodash from 4.17.11 to 4.17.15 7597d7f

v0.0.5...v0.0.6

Assets 2

@koddsson koddsson released this Jul 29, 2019 · 6 commits to master since this release

  • Merge pull request #6 from github/add-typescript-definition-file 987937b
  • set HTMLTextAreaElement as a return value from input 60b6ed5
  • add typescript definition file 9a5af7e

v0.0.4...v0.0.5

Assets 2

@koddsson koddsson released this Jul 24, 2019 · 10 commits to master since this release

  • Merge pull request #5 from github/update-deps da9f672
  • update eslint, eslint-plugin-github and flow-bin manually to latest versions f3f8577
  • run npm update 065da1a

v0.0.3...v0.0.4

Assets 2
Jun 6, 2019
May 28, 2019
0.0.2
May 14, 2019
Merge pull request #2 from github/api
Add Flow definition
You can’t perform that action at this time.