https://github.com/ziv/any-src
https://github.com/ziv/any-src
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ziv/any-src
- Owner: ziv
- Created: 2021-02-10T16:20:56.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-03-17T17:23:13.000Z (about 5 years ago)
- Last Synced: 2025-07-01T18:09:37.379Z (11 months ago)
- Language: TypeScript
- Size: 136 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# any-src
Simple web-component provide `src` attribute to enrich HTML templates.
The package export only single component `any-src`.
All options and configuration done using HTML5 `data-*` attributes.
## Usage
```shell
npm i any-src
```
## API
### Component Attributes
| Attribute | Description |
| --- | --- |
| `src` | URL to load |
| `opts` | [fetch](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters) options `JSON` |
### Content Attributes
| Attribute | Description |
| --- | --- |
| `data-text` | Set `innerText` of element |
| `data-src` | Set `src` of element |
| `data-value` | Set `value` of element |
## Example
### Data source
The following `JSON` available at `/data.json` end-point.
```json
{
"sample": "Sample text",
"numeric": 120,
"image": "https://picsum.photos/100/100"
}
```
### HTML
```html
![]()
```
## TODO
* HTTP options for the fetch function
* loader support
* error handling?