- Notifications
You must be signed in to change notification settings - Fork17
Releases: github/remote-input-element
v0.4.0
af06374
Compare
What's Changed
- Use chromium for karma tests by@theinterned in#26
- Add a .devcontainer by@koddsson in#27
- Add a release action by@koddsson in#29
- move AOR to primer by@keithamus in#30
- Add event detail - eventType to 'remote-input-success' customEvent by@kendallgassner in#34
New Contributors
- @theinterned made their first contribution in#26
- @kendallgassner made their first contribution in#34
Full Changelog:v0.3.1...v0.4.0
Assets2
Uh oh!
There was an error while loading.Please reload this page.
v0.3.1
Compare
- fix: output umd build for main key#19
Assets2
Uh oh!
There was an error while loading.Please reload this page.
v0.3.0
Compare
- Remove
text/html; fragment
from accept header (#22)
Assets2
Uh oh!
There was an error while loading.Please reload this page.
v0.2.1
Compare
- Accept
text/fragment+html
as a content-type (#21)
Assets2
Uh oh!
There was an error while loading.Please reload this page.
0.2.0
Compare
Assets2
Uh oh!
There was an error while loading.Please reload this page.
v0.1.2
Compare
Assets2
Uh oh!
There was an error while loading.Please reload this page.
v0.1.1
Compare
Assets2
Uh oh!
There was an error while loading.Please reload this page.
v0.1.0
Compare
Assets2
Uh oh!
There was an error while loading.Please reload this page.
v0.0.7
Compare
Assets2
Uh oh!
There was an error while loading.Please reload this page.
0.0.7
b24d7b5
Compare
<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-inputsrc="/query"aria-owns="results"><input></remote-input><ulid="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-inputsrc="/preview"aria-owns="md-preview"param="body"><textarea></textarea></remote-input><divid="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
constremoteInput=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 nativecustom element support require apolyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge
Development
npm installnpm test
License
Distributed under the MIT license. See LICENSE for details.
Assets3
Uh oh!
There was an error while loading.Please reload this page.