{"id":13455428,"url":"https://github.com/AndreasFaust/react-strapi-img","last_synced_at":"2025-03-24T08:32:40.743Z","repository":{"id":57345799,"uuid":"322015277","full_name":"AndreasFaust/react-strapi-img","owner":"AndreasFaust","description":"react-strapi-img is a wrapper for images, that handles responsive sizes, lazyloading and loading-animation. It is built to consume the image-data from Strapi.","archived":false,"fork":false,"pushed_at":"2021-02-28T16:23:46.000Z","size":63612,"stargazers_count":17,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-18T19:51:49.306Z","etag":null,"topics":["blur","image","lazyloading","nextjs","react","strapi","webp"],"latest_commit_sha":null,"homepage":"https://andreasfaust.github.io/react-strapi-img/","language":"TypeScript","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/AndreasFaust.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-16T14:58:17.000Z","updated_at":"2023-11-20T06:00:09.000Z","dependencies_parsed_at":"2022-09-17T06:30:27.580Z","dependency_job_id":null,"html_url":"https://github.com/AndreasFaust/react-strapi-img","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreasFaust%2Freact-strapi-img","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreasFaust%2Freact-strapi-img/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreasFaust%2Freact-strapi-img/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreasFaust%2Freact-strapi-img/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndreasFaust","download_url":"https://codeload.github.com/AndreasFaust/react-strapi-img/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221947572,"owners_count":16906151,"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":["blur","image","lazyloading","nextjs","react","strapi","webp"],"created_at":"2024-07-31T08:01:05.353Z","updated_at":"2025-03-24T08:32:40.714Z","avatar_url":"https://github.com/AndreasFaust.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# `react-strapi-img`\n\n**react-strapi-img** is a wrapper for `img`, that handles webp-support, responsive sizes, lazyloading and loading-animation. It is optimized to consume image-data from `Strapi`, but can be useful in other contexts as well.\n\n🦊 Take a look at the [example](https://andreasfaust.github.io/react-strapi-img/).\n\n⚠️ This library is in **beta**-state, which means its API still can change a bit without warning. Everything is working great so far, but it still needs some testing. As soon as I tested it in production and gathered some feedback, I will release verson `1.0.0`. Feel free to join and improve!\n\n### What it does\n\n- Wrap image in proportional container, to preserve and determine height.\n- Lazyload image.\n- Transform Strapi image-`formats`-object into `srcset`.\n- Add Blured, animated base64-placeholder.\n- Use `WebP`-format if supported.\n- Add `noscript`-image for SEO.\n- Decode images before rendering for better performance.\n\n### PeerDependencies\n\n- react: \u003e= 16.8.0,\n- react-dom: \u003e= 16.8.0,\n- styled-components: \u003e= 5.2.0\n\n### Why another image-loader?\n\nI could not find an existing solution, that connects resized images from `Strapi` with `NextJS` conveniently and meets all my requirements.\n\n---\n\n## Install\n\n```zsh\nyarn add react react-dom styled-components react-strapi-img\n```\n\n```zsh\nnpm install -S react react-dom styled-components react-strapi-img\n```\n\n---\n\n## Setup image-resizing in `Strapi`\n\nTo gain the efficency of `srcset`, copy the folder [services](services) to the Strapi-folder `/extensions/upload`. The scripts will resize every uploaded image:\n\n1. to `base64`\n2. to sizes from `400px` to the `original image width` in steps of `200px`\n   – maximum is `3000px`\n   — the original image-size will be added as largest breakpoint\n\nThis method is gratefully adapted from here:\nhttps://sarpisik.com/blog/how-to-generate-different-image-formats-with-strapi-plugin-upload-part-ii\n\nIn `react` fetch the image with `graphQL`:\n\n```graphql\nquery {\n  image {\n    url\n    alternativeText\n    width\n    height\n    formats\n  }\n}\n```\n\n---\n\n## Usage\n\nAfter setting up `Strapi` and uploading some images, use them in your react-components:\n\n```tsx\nimport React from \"react\";\nimport Image, { Types } from \"react-strapi-img\";\n\ninterface Props {\n  imageFromStrapi: Types.ImageProps;\n}\n\nconst MyApp: React.FC\u003cProps\u003e = ({ imageFromStrapi }) =\u003e {\n  const { url, alternativeText, width, height, formats } = imageFromStrapi;\n  return (\n    \u003cImage\n      // you could also spread all props like this: {...imageFromStrapi},\n      // but for the purpose of demonstration I am adding them one by one\n      url={url} // required\n      alternativeText={alternativeText} // optional\n      width={width} // optional\n      height={height} // optional\n      formats={formats} // optional\n      prefix={\n        process.env.NODE_ENV === \"production\"\n          ? \"https://api.myapp.net\"\n          : \"http://localhost:1337\"\n      } // optional\n    /\u003e\n  );\n};\n\nexport default MyApp;\n```\n\n---\n\n## Props\n\nExcept `url` all props are **optional**.\n\n| **Name**               | **Type** | **Default** | **Description**                                                                                                                                                  |\n| :--------------------- | :------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **url**                | string   |             | Image-url. Fetch with Strapi.                                                                                                                                    |\n| **formats**            | object   |             | Strapi provides a formats-object for `srcset` and `base64`. Fetch it and insert it here.                                                                         |\n| **sizes**              | string   |             | sizes-Tag. Help browsers to make better decisions. https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/                                       |\n| **objectFit**          | string   | 'cover'     | CSS-property. Useful together with `proportionalHeight`                                                                                                          |\n| **objectPosition**     | string   | 'center'    | CSS-property. Useful together with `proportionalHeight`                                                                                                          |\n| **width**              | number   |             | Provided by Strapi. Pass it to preserve original image-proportions.                                                                                              |\n| **height**             | number   |             | Provided by Strapi. Pass it to preserve original image-proportions.                                                                                              |\n| **proportionalHeight** | number   |             | Provide for custom image-proportion. Crops image. Use along with `objectFit` and `objectPosition`.                                                               |\n| **placeholder**        | boolean  | `true`      | Show `base64`-Placeholder.                                                                                                                                       |\n| **rootMargin**         | string   | 50px        | Used by `Intersection Observer` to determine distance from viewport, when the image should be loaded                                                             |\n| **threshold**          | number   | 0           | Value between `0` and `1`. Used by `Intersection Observer` to indicate at what percentage of the target's visibility the observer's callback should be executed. |\n| **alternativeText**    | string   |             | `alt`-Attribute of the image. Provided by `Strapi`. Pass it for good SEO.                                                                                        |\n| **className**          | string   |             | Custom className for the wrapping `div`-tag.                                                                                                                     |\n| **style**              | string   |             | Custom styles for **wrapper**. `styled-components` template-literal.                                                                                             |\n| **stylePlaceholder**   | string   |             | Custom styles for **placeholder-img**. `styled-components` template-literal                                                                                      |\n| **styleImg**           | string   |             | Custom styles for **img-tag**. `styled-components` template-literal                                                                                              |\n| **prefix**             | string   |             | Prefix all src and srcset.                                                                                                                                       |\n| **onLoad**             | function |             | Image-`onLoad`-callback.                                                                                                                                         |\n| **onError**            | function |             | Image-`onError`-callback.                                                                                                                                        |\n\n---\n\n## ImageProvider\n\nOptionally you can wrap your App in the component `ImageProvider`, which lets you determine repeating settings at a central spot. Have a look at this `_app.tsx` from a `nextJS`-project:\n\n```tsx\nimport React from \"react\";\nimport { ImageProvider } from \"react-strapi-img\";\n\nfunction MyApp({ Component, pageProps, router }) {\n  return (\n    \u003cImageProvider\n      prefix={process.env.productionPath}\n      style={`border: 10px solid red;`}\n      onLoad={(event) =\u003e console.log(event.target)}\n    \u003e\n      \u003cComponent {...pageProps} key={router.route} /\u003e\n    \u003c/ImageProvider\u003e\n  );\n}\n\nexport default MyApp;\n```\n\nAdditionally the `ImageProvider` detects `webp`-support once, which gives the `Image`-Components a tiny performance boost.\n\n### `ImageProvider`-Props\n\nAll props are **optional**. You can find them [here at \"ContextProps\"](/src/types.ts).\n\n---\n\n## TypeScript-Types\n\nAll relevant [Types](/src/types.ts) are exported:\n\n1. ImageProps\n2. ProviderProps\n3. Formats\n4. ObjectFit\n\n```tsx\nimport { Types } from \"react-strapi-img\";\n\ninterface Props {\n  imageFromStrapi: Types.ImageProps;\n}\n\nconst MyApp: React.FC\u003cProps\u003e = ({ imageFromStrapi }) =\u003e {\n  return \u003cImage {...imageFromStrapi} /\u003e;\n};\n\nexport default MyApp;\n```\n\n---\n\n## Rendered Output\n\nInitially:\n\n```html\n\u003cdiv class=\"Wrapper__StyledImageWrapper-sc-1o399dd-0 cqCfje imageWrapper\"\u003e\n  \u003cimg\n    src=\"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAUHAgb/xAAlEAACAQMCBgMBAAAAAAAAAAABAgMABBEFEgYHEyExQSIycVH/xAAVAQEBAAAAAAAAAAAAAAAAAAADBP/EABgRAAMBAQAAAAAAAAAAAAAAAAABEQID/9oADAMBAAIRAxEAPwCT8sZ4o9Q055XZFF1uJz5AFdhzB4mt7rW4hAz7OiBJj3lk7iopZaleWqp0LiRCjb0w31b+/tYuNRurmXfPNI7gEZLevOKmfJvVo2esUg24guVXU5Pl3IGf3GKKQyvvfc+ST7JoplmIN6rp/9k=\"\n    alt='Placeholder for the image \"testimg_1d61597ba3.jpg\".'\n    class=\"Placeholder__StyledPlaceholder-h5tses-0 grjLdz\"\n  /\u003e\n  \u003cimg\n    src=\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\"\n    alt=\"This is testimg_1d61597ba3.jpg\"\n    class=\"StyledImage-yw93u6-0 bvBGFq no-js-testimg_1d61597ba3\"\n  /\u003e\n  \u003cnoscript\u003e\n    \u003cstyle\u003e\n      .no-js-testimg_1d61597ba3 {\n        display: none !important;\n      }\n    \u003c/style\u003e\n    \u003cimg\n      src=\"testimg_1d61597ba3.jpg\"\n      alt=\"This is testimg_1d61597ba3.jpg\"\n      class=\"StyledImage-yw93u6-0 bvBGFq\"\n    /\u003e\n  \u003c/noscript\u003e\n\u003c/div\u003e\n```\n\nAfter image was loaded:\n\n```html\n\u003cdiv class=\"Wrapper__StyledImageWrapper-sc-1o399dd-0 cOGFGG imageWrapper\"\u003e\n  \u003cimg\n    src=\"testimg_1d61597ba3.jpg\"\n    alt=\"This is testimg_1d61597ba3.jpg\"\n    class=\"StyledImage-yw93u6-0 bvBGFq no-js-testimg_1d61597ba3\"\n    srcset=\"\n      /400_testimg_1d61597ba3.webp   400w,\n      /600_testimg_1d61597ba3.webp   600w,\n      /800_testimg_1d61597ba3.webp   800w,\n      /1000_testimg_1d61597ba3.webp 1000w,\n      /1200_testimg_1d61597ba3.webp 1200w,\n      /1400_testimg_1d61597ba3.webp 1400w,\n      /1600_testimg_1d61597ba3.webp 1600w,\n      /1800_testimg_1d61597ba3.webp 1800w,\n      /2000_testimg_1d61597ba3.webp 2000w,\n      /2200_testimg_1d61597ba3.webp 2200w,\n      /2400_testimg_1d61597ba3.webp 2400w,\n      /2600_testimg_1d61597ba3.webp 2600w,\n      /2800_testimg_1d61597ba3.webp 2800w,\n      /3000_testimg_1d61597ba3.webp 3000w\n    \"\n  /\u003e\n  \u003cnoscript\u003e\n    \u003cstyle\u003e\n      .no-js-testimg_1d61597ba3 {\n        display: none !important;\n      }\n    \u003c/style\u003e\n    \u003cimg\n      src=\"testimg_1d61597ba3.jpg\"\n      srcset=\"\n        /400_testimg_1d61597ba3.webp   400w,\n        /600_testimg_1d61597ba3.webp   600w,\n        /800_testimg_1d61597ba3.webp   800w,\n        /1000_testimg_1d61597ba3.webp 1000w,\n        /1200_testimg_1d61597ba3.webp 1200w,\n        /1400_testimg_1d61597ba3.webp 1400w,\n        /1600_testimg_1d61597ba3.webp 1600w,\n        /1800_testimg_1d61597ba3.webp 1800w,\n        /2000_testimg_1d61597ba3.webp 2000w,\n        /2200_testimg_1d61597ba3.webp 2200w,\n        /2400_testimg_1d61597ba3.webp 2400w,\n        /2600_testimg_1d61597ba3.webp 2600w,\n        /2800_testimg_1d61597ba3.webp 2800w,\n        /3000_testimg_1d61597ba3.webp 3000w\n      \"\n      alt=\"This is testimg_1d61597ba3.jpg\"\n      class=\"StyledImage-yw93u6-0 bvBGFq\"\n    /\u003e\n  \u003c/noscript\u003e\n\u003c/div\u003e\n```\n\n---\n\n## Contributing\n\nEvery contribution is very much appreciated. You are invited to join me in making this software reliable and performant for everyone.\n\n**If `react-strapi-img` is helpful for you,\ndon't hesitate to star it on\n[GitHub](https://github.com/AndreasFaust/react-strapi-img).**\n\n---\n\n## License\n\nLicensed under the MIT License, Copyright © 2020-present Andreas Faust. See\n[LICENSE](LICENSE.md) for more information.\n\n---\n\n## Thanks\n\nI want to give special thanks to [Sarp](https://github.com/sarpisik) for the `Strapi`-groundwork and [Welly](https://github.com/wellyshen) for his library [react-cool-img](https://github.com/wellyshen/react-cool-img), from which I learned and adapted a lot.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAndreasFaust%2Freact-strapi-img","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAndreasFaust%2Freact-strapi-img","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAndreasFaust%2Freact-strapi-img/lists"}