# svelte-datocms
> # Progressive/responsive image component
Latest version **0.6.4** (published 2022-06-05) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install svelte-datocms
pnpm add svelte-datocms
yarn add svelte-datocms
bun add svelte-datocms
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 0.6.4 |
| Published | 2022-06-05 |
| First published | 2021-09-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 60.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Maintainers | lukasz_wisniewski |
| Keywords | svelte, datocms, structuredtext, blurhash |
## Links
- npm: https://www.npmjs.com/package/svelte-datocms
- Repository: https://github.com/lukaszwisniewski88/svelte-datocms
- Homepage: https://github.com/lukaszwisniewski88/svelte-datocms#readme
- Issues: https://github.com/lukaszwisniewski88/svelte-datocms/issues
- npm.io page: https://npm.io/package/svelte-datocms
## Dependencies (4)
- [blurhash](https://npm.io/package/blurhash.md) ^1.1.5
- [datocms-listen](https://npm.io/package/datocms-listen.md) ^0.1.8
- [datocms-structured-text-utils](https://npm.io/package/datocms-structured-text-utils.md) ^1.2.0
- [datocms-structured-text-to-html-string](https://npm.io/package/datocms-structured-text-to-html-string.md) ^1.3.0
## Alternatives
- [@gemini-wallet/core](https://npm.io/package/@gemini-wallet/core.md) — 515.6K weekly downloads
- [utility](https://npm.io/package/utility.md) — 416.6K weekly downloads
- [@primno/dpapi](https://npm.io/package/@primno/dpapi.md) — 7.2K weekly downloads
- [pi-readseek](https://npm.io/package/pi-readseek.md) — 3.7K weekly downloads
- [@emilia-protocol/verify](https://npm.io/package/@emilia-protocol/verify.md) — 1.1K weekly downloads
## Recent versions
- 0.6.4 (latest) — 2022-06-05
- 0.6.3 — 2021-11-22
- 0.6.2 — 2021-11-16
- 0.6.1 — 2021-10-21
- 0.5.7 — 2021-10-01
- 0.5.6 — 2021-10-01
- 0.5.5 — 2021-10-01
- 0.5.4-a — 2021-09-29
- 0.5.4 — 2021-09-29
- 0.5.3-a — 2021-09-29
- 0.5.3 — 2021-09-29
- 0.5.2 — 2021-09-29
- 0.5.1 — 2021-09-28
## README
# Svelte-datocms
# Progressive/responsive image component
`` is a Svelte component specially designed to work seamlessly with DatoCMS’s [`responsiveImage` GraphQL query](https://www.datocms.com/docs/content-delivery-api/uploads#responsive-images) that optimizes image loading for your sites.
This is a port to Svelte from react version.
## Props
| prop | type | required | description | default |
| --------------------- | ------------------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| data | `ResponsiveImage` object | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query. | |
| fadeInDuration | integer | :x: | Duration (in ms) of the fade-in transition effect upoad image loading | 500 |
| intersectionThreshold | float | :x: | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't | 0 |
| lazyLoad | Boolean | :x: | Wheter enable lazy loading or not | true |
| explicitWidth | Boolean | :x: | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid | false |
### The `ResponsiveImage` object
The `data` prop expects an object with the same shape as the one returned by `responsiveImage` GraphQL call. It's up to you to make a GraphQL query that will return the properties you need for a specific use of the `` component.
- The minimum required properties for `data` are: `aspectRatio`, `width`, `sizes`, `srcSet` and `src`;
- `alt` and `title`, while not mandatory, are all highly suggested, so remember to use them!
- You either want to add the `webpSrcSet` field or specify `{ auto: format }` in your `imgixParams`, to automatically use WebP images in browsers that support the format;
- If you provide both the `bgColor` and `base64` property, the latter will take precedence, so just avoiding querying both fields at the same time, it will only make the response bigger :wink:
Here's a complete recap of what `responsiveImage` offers:
| property | type | required | description |
| ----------- | ------- | ------------------ | ----------------------------------------------------------------------------------------------- |
| aspectRatio | float | :white_check_mark: | The aspect ratio (width/height) of the image |
| width | integer | :white_check_mark: | The width of the image |
| height | integer | :white_check_mark: | The height of the image |
| sizes | string | :white_check_mark: | The HTML5 `sizes` attribute for the image |
| srcSet | string | :white_check_mark: | The HTML5 `srcSet` attribute for the image |
| src | string | :white_check_mark: | The fallback `src` attribute for the image |
| webpSrcSet | string | :x: | The HTML5 `srcSet` attribute for the image in WebP format, for browsers that support the format |
| alt | string | :x: | Alternate text (`alt`) for the image |
| title | string | :x: | Title attribute (`title`) for the image |
| bgColor | string | :x: | The background color for the image placeholder |
| base64 | string | :x: | A base64-encoded thumbnail to offer during image loading |
## Blurhash Component
`` is a Svelte component to display an image placeholder from blurhash string.
### Props
| prop | type | required | description | default |
| ------ | ------ | ------------------ | ------------------------------------------------------ | ------- |
| hash | string | :white_check_mark: | blurhash string of the image | |
| width | number | :x: | x resolution of the drawed canvas | 32 |
| height | number | :x: | x resolution of the drawed canvas | 32 |
| punch | number | :x: | punch is intesivity of the color effect after decoding | 1 |
# More coming soon...
## Contributing
Contributions are always welcome!
---
_Source: https://npm.io/package/svelte-datocms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._