https://github.com/github/remote-input-element
An input element that sends its value to a server endpoint and renders the response body.
https://github.com/github/remote-input-element
custom-elements web-components
Last synced: 11 months ago
JSON representation
An input element that sends its value to a server endpoint and renders the response body.
- Host: GitHub
- URL: https://github.com/github/remote-input-element
- Owner: github
- License: mit
- Created: 2019-04-30T20:55:09.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-10-15T18:19:09.000Z (over 1 year ago)
- Last Synced: 2025-04-03T12:08:59.258Z (11 months ago)
- Topics: custom-elements, web-components
- Language: JavaScript
- Homepage: https://github.github.io/remote-input-element/examples
- Size: 823 KB
- Stars: 83
- Watchers: 247
- Forks: 17
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
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
```js
import '@github/remote-input-element'
```
```html
```
A GET request will be sent to `/query?q=${input.value}`.
The parameter name (`q`) is customizable with the `[param]` attribute:
```html
```
### Styling loading state
A boolean `[loading]` attribute is added to `` when a network request begins and removed when it ends.
```css
.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][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Microsoft Edge
[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements
## Development
```
npm install
npm test
```
## License
Distributed under the MIT license. See LICENSE for details.