Navigator Prefabricating Marinates

    @github/remote-input-element
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    <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.

    Keywords

    none

    Install

    npm i @github/remote-input-element

    DownloadsWeekly Downloads

    213

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    15.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • jfuchs
    • githubbot
    • manuelpuyol
    • jonrohan
    • broccolini
    • mislav
    • mdo
    • primer-css
    • keithamus
    • mschoening
    • koddsson
    • emilybrick
    • lgarron
    • colebemis
    • smockle
    • simurai
    • khiga8
    • dustin.greif
    • srt32