@github/remote-input-element

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

Usage no npm install needed!

<script type="module">
  import githubRemoteInputElement from 'https://cdn.skypack.dev/@github/remote-input-element';
</script>

README

<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

  • loadstart - The server fetch has started.
  • load - The network request completed successfully.
  • error - The network request failed.
  • loadend - The network request has completed.
  • remote-input-success – Received a successful response (status code 200-299), and response HTML has been set. Bubbles.
  • remote-input-error – Received a not successful response. Bubbles.

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.