{"id":15048065,"url":"https://github.com/github/remote-input-element","last_synced_at":"2025-04-12T11:51:11.416Z","repository":{"id":37549959,"uuid":"184330306","full_name":"github/remote-input-element","owner":"github","description":"An input element that sends its value to a server endpoint and renders the response body.","archived":false,"fork":false,"pushed_at":"2024-10-15T18:19:09.000Z","size":843,"stargazers_count":83,"open_issues_count":1,"forks_count":17,"subscribers_count":247,"default_branch":"main","last_synced_at":"2025-04-03T12:08:59.258Z","etag":null,"topics":["custom-elements","web-components"],"latest_commit_sha":null,"homepage":"https://github.github.io/remote-input-element/examples","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/github.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-30T20:55:09.000Z","updated_at":"2025-02-15T11:30:48.000Z","dependencies_parsed_at":"2024-04-08T17:48:09.848Z","dependency_job_id":"88dbf609-fdba-4c38-a796-1919c6ca683c","html_url":"https://github.com/github/remote-input-element","commit_stats":{"total_commits":102,"total_committers":8,"mean_commits":12.75,"dds":0.6568627450980392,"last_synced_commit":"4ec740a69773f4b18dfeef28d52434b0475bcd13"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":"github/custom-element-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fremote-input-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fremote-input-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fremote-input-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Fremote-input-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/github","download_url":"https://codeload.github.com/github/remote-input-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248564994,"owners_count":21125412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","web-components"],"created_at":"2024-09-24T21:07:36.274Z","updated_at":"2025-04-12T11:51:11.396Z","avatar_url":"https://github.com/github.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;remote-input\u0026gt; element\n\nAn input element that sends its value to a server endpoint and renders the response body.\n\n## Installation\n\n```\n$ npm install @github/remote-input-element\n```\n\n## Usage\n\n```js\nimport '@github/remote-input-element'\n```\n\n```html\n\u003c!-- Filter a list of items from the server --\u003e\n\u003cremote-input src=\"/query\" aria-owns=\"results\"\u003e\n  \u003cinput\u003e\n\u003c/remote-input\u003e\n\u003cul id=\"results\"\u003e\u003c/ul\u003e\n```\n\nA GET request will be sent to `/query?q=${input.value}`.\n\nThe parameter name (`q`) is customizable with the `[param]` attribute:\n\n```html\n\u003c!-- Live preview of Markdown --\u003e\n\u003cremote-input src=\"/preview\" aria-owns=\"md-preview\" param=\"body\"\u003e\n  \u003ctextarea\u003e\u003c/textarea\u003e\n\u003c/remote-input\u003e\n\u003cdiv id=\"md-preview\"\u003e\u003c/div\u003e\n```\n\n### Styling loading state\n\nA boolean `[loading]` attribute is added to `\u003cremote-input\u003e` when a network request begins and removed when it ends.\n\n```css\n.loading-icon { display: none; }\nremote-input[loading] .loading-icon { display: inline; }\n```\n\n### Events\n\n- `loadstart` - The server fetch has started.\n- `load` - The network request completed successfully.\n- `error` - The network request failed.\n- `loadend` - The network request has completed.\n- `remote-input-success` – Received a successful response (status code 200-299), and response HTML has been set. Bubbles.\n- `remote-input-error` – Received a not successful response. Bubbles.\n\n## Browser support\n\nBrowsers without native [custom element support][support] require a [polyfill][].\n\n- Chrome\n- Firefox\n- Safari\n- Microsoft Edge\n\n[support]: https://caniuse.com/#feat=custom-elementsv1\n[polyfill]: https://github.com/webcomponents/custom-elements\n\n## Development\n\n```\nnpm install\nnpm test\n```\n\n## License\n\nDistributed under the MIT license. See LICENSE for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithub%2Fremote-input-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgithub%2Fremote-input-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithub%2Fremote-input-element/lists"}