{"id":13422004,"url":"https://github.com/imgix/react-imgix","last_synced_at":"2025-05-14T13:06:15.416Z","repository":{"id":1588159,"uuid":"42993259","full_name":"imgix/react-imgix","owner":"imgix","description":"React component to display imgix images","archived":false,"fork":false,"pushed_at":"2025-05-03T18:23:45.000Z","size":15128,"stargazers_count":374,"open_issues_count":17,"forks_count":62,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-05-03T19:29:27.954Z","etag":null,"topics":["components","hacktoberfest","images","imgix","react","reactjs","signing-imgix-urls","src","srcset"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-imgix","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imgix.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-09-23T10:02:17.000Z","updated_at":"2025-04-30T02:42:40.000Z","dependencies_parsed_at":"2023-12-08T19:31:24.472Z","dependency_job_id":"08d6d90b-fa46-4120-8885-b72b03ec3f3e","html_url":"https://github.com/imgix/react-imgix","commit_stats":{"total_commits":1020,"total_committers":46,"mean_commits":22.17391304347826,"dds":0.592156862745098,"last_synced_commit":"b120a53c0d9d7eb7c8c7c36b1efe532689a4d213"},"previous_names":[],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgix%2Freact-imgix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgix%2Freact-imgix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgix%2Freact-imgix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imgix%2Freact-imgix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imgix","download_url":"https://codeload.github.com/imgix/react-imgix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149950,"owners_count":22022851,"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":["components","hacktoberfest","images","imgix","react","reactjs","signing-imgix-urls","src","srcset"],"created_at":"2024-07-30T23:00:35.411Z","updated_at":"2025-05-14T13:06:15.356Z","avatar_url":"https://github.com/imgix.png","language":"JavaScript","funding_links":[],"categories":["UI Components","JavaScript"],"sub_categories":["Photo / Image"],"readme":"\u003c!-- ix-docs-ignore --\u003e\n\n![imgix logo](https://assets.imgix.net/sdk-imgix-logo-new.svg)\n\n`react-imgix` provides custom components for integrating [imgix](https://www.imgix.com/) into React sites and generating images server-side.\n\n[![npm version](https://img.shields.io/npm/v/react-imgix.svg)](https://www.npmjs.com/package/react-imgix)\n[![Build Status](https://circleci.com/gh/imgix/react-imgix.svg?style=shield)](https://circleci.com/gh/imgix/react-imgix)\n[![Downloads](https://img.shields.io/npm/dm/react-imgix.svg)](https://www.npmjs.com/package/react-imgix)\n[![License](https://img.shields.io/npm/l/react-imgix)](https://github.com/imgix/react-imgix/blob/main/LICENSE)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors-)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Freact-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Freact-imgix?ref=badge_shield)\n\n---\n\n\u003c!-- /ix-docs-ignore --\u003e\n\n\u003c!-- NB: Run `npx markdown-toc README.md --maxdepth 4 | sed -e 's/[[:space:]]\\{2\\}/    /g'` to generate TOC, and copy the result from the terminal to replace the TOC below :) --\u003e\n\n\u003c!-- prettier-ignore-start --\u003e\n\n\u003c!-- toc --\u003e\n\n- [Overview / Resources](#overview--resources)\n- [Installation](#installation)\n- [Usage](#usage)\n    * [Examples](#examples)\n        + [Basic Use Case](#basic-use-case)\n        + [Server-Side Rendering](#server-side-rendering)\n        + [Flexible Image Rendering](#flexible-image-rendering)\n        + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible)\n        + [Background Mode](#background-mode)\n        + [Picture Support](#picture-support)\n        + [ImgixProvider Component](#imgixprovider-component)\n    * [Advanced Examples](#advanced-examples)\n        + [General Advanced Usage](#general-advanced-usage)\n        + [Passing Custom HTML Attributes](#passing-custom-html-attributes)\n        + [Lazy Loading](#lazy-loading)\n        + [Low Quality Image Placeholder Technique (LQIP)](#low-quality-image-placeholder-technique-lqip)\n        + [Attaching Ref to DOM Elements](#attaching-ref-to-dom-elements)\n    * [Props](#props)\n        + [Shared Props (Imgix, Source)](#shared-props-imgix-source)\n        + [Picture Props](#picture-props)\n        + [Background Props](#background-props)\n    * [Global Configuration](#global-configuration)\n        + [Warnings](#warnings)\n- [Upgrade Guides](#upgrade-guides)\n    * [8.x to 9.0](#8x-to-90)\n    * [7.x to 8.0](#7x-to-80)\n- [Browser Support](#browser-support)\n- [Contributors](#contributors)\n- [Meta](#meta)\n\n\u003c!-- tocstop --\u003e\n\n\u003c!-- prettier-ignore-end --\u003e\n\n## Overview / Resources\n\n**Before you get started with react-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/). This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.\n\nBelow are some other articles that help explain responsive imagery, and how it can work alongside imgix:\n\n- [Using imgix with `\u003cpicture\u003e`](https://docs.imgix.com/tutorials/using-imgix-picture-element). Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.\n- [Responsive Images with `srcset` and imgix](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix). A look into how imgix can work with `srcset` and `sizes` to serve the right image.\n\n## Installation\n\n- **NPM**: `npm install react-imgix`\n- **Yarn**: `yarn add react-imgix`\n\nThis module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything**\n\n## Usage\n\n```js\nimport Imgix from \"react-imgix\";\n\n// in react component\n\u003cImgix src={string} /\u003e;\n```\n\n### Examples\n\n#### Basic Use Case\n\nFor simply using as you would use an `\u003cimg\u003e`, react-imgix can be used as follows:\n\n```js\nimport Imgix from \"react-imgix\";\n\n\u003cImgix src=\"https://assets.imgix.net/examples/pione.jpg\" sizes=\"100vw\" /\u003e;\n```\n\n[![Edit xp0348lv0z](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/charming-keller-kjnsq)\n\n**Please note:** `100vw` is an appropriate `sizes` value for a full-bleed image. If your image is not full-bleed, you should use a different value for `sizes`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute.\n\nThis will generate HTML similar to the following:\n\n```html\n\u003cimg\n  src=\"https://assets.imgix.net/examples/pione.jpg?auto=format\u0026crop=faces\u0026ixlib=react-7.2.0\"\n  sizes=\"100vw\"\n  srcset=\"\n    https://assets.imgix.net/examples/pione.jpg?auto=format\u0026crop=faces\u0026ixlib=react-7.2.0\u0026w=100 100w,\n    https://assets.imgix.net/examples/pione.jpg?auto=format\u0026crop=faces\u0026ixlib=react-7.2.0\u0026w=200 200w,\n    ...\n  \"\n/\u003e\n```\n\nSince imgix can generate as many derivative resolutions as needed, react-imgix calculates them programmatically, using the dimensions you specify. All of this information has been placed into the srcset and sizes attributes.\n\n**Width and height known and fixed:** If the width and height are known beforehand, and a fixed-size image is wanted, it is recommended that they are set explicitly:\n\n```js\nimport Imgix from \"react-imgix\";\n\n\u003cImgix\n  src=\"https://assets.imgix.net/examples/pione.jpg\"\n  width={100} // This sets what resolution the component should load from the CDN and the size of the resulting image\n  height={200}\n/\u003e;\n```\n\n[![Edit xp0348lv0z](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/charming-keller-kjnsq)\n\nWhen width and height are specified, `\u003cImgix\u003e` will give the image a srcset with resolution descriptors.\n\n**Width and height known but fluid:** If the image's intrinsic width and height are known but a fluid size image is wanted, [width and height should still be set to avoid layout shift](https://web.dev/optimize-cls/), but they must be set via `htmlAttributes` so as not to hint to `\u003cImgix\u003e` to produce resolution descriptors in the srcset.\n\n```js\nimport Imgix from \"react-imgix\";\n\n\u003cImgix\n  src=\"https://assets.imgix.net/examples/pione.jpg\"\n  sizes=\"(min-width: 1024px) 40vw, 90vw\"\n  htmlAttributes={{ // These are ignored by Imgix but passed through to the \u003cimg\u003e element\n    width: 200,\n    height: 100,\n  }}\n/\u003e;\n```\n\nIn this example, `\u003cImgix\u003e` will produce a srcset with width descriptors.\n\n#### Server-Side Rendering\n\n\u003e Note\nThis library does not run in Server Components but instead adds the [\"use client\" directive](https://react.dev/reference/react/use-client) to components. This means they are able to be used alongside Server Components (for example, as children), but they still require client-side JavaScript. [Client Components are still SSRed](https://github.com/reactwg/server-components/discussions/4).\n\nReact-imgix also works well on the server. Since react-imgix uses `srcset` and `sizes`, it allows the browser to render the correctly sized image immediately after the page has loaded.\nIf they are known, pass width and height attributes via `htmlAttributes` to help combat layout shift.\n\n```js\nimport Imgix from \"react-imgix\";\n\n\u003cImgix\n  src=\"https://assets.imgix.net/examples/pione.jpg\"\n  sizes=\"100vw\"\n  htmlAttributes={{\n    width: 400,\n    height: 250,\n  }}\n/\u003e;\n```\n\nIf the width and height are known beforehand, and a fixed-size image is wanted, set width and height and do not set `sizes`:\n\n```js\nimport Imgix from \"react-imgix\";\n\n\u003cImgix\n  src=\"https://assets.imgix.net/examples/pione.jpg\"\n  width={100} // This sets what resolution the component should load from the CDN and the size of the resulting image\n  height={200}\n/\u003e;\n```\n\n#### Flexible Image Rendering\n\nThis component acts dynamically by default. The component will leverage `srcset` and `sizes` to render the right size image for its container. This is an example of this responsive behaviour.\n\n`sizes` should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without `sizes` and correct styling the image might render at full-size.\n\n`./styles.css`\n\n```css\n.App {\n  display: flex;\n}\n\n.App \u003e img {\n  margin: 10px auto;\n  width: 10vw;\n  height: 200px;\n}\n```\n\n`./app.js`\n\n```js\nimport \"./styles.css\";\n\n\u003cdiv className=\"App\"\u003e\n  \u003cImgix\n    src=\"https://assets.imgix.net/examples/pione.jpg\"\n    sizes=\"calc(10% - 10px)\"\n  /\u003e\n\u003c/div\u003e;\n```\n\n[![Edit cold-wave-4qfhe](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/cold-wave-4qfhe?fontsize=14\u0026hidenavigation=1)\n\n**Aspect Ratio:** A developer can pass a desired aspect ratio, which will be used when\ngenerating srcsets to resize and crop your image as specified. For the `ar` parameter to take effect, ensure that the `fit` parameter is set to `crop`.\n\n```js\n\u003cdiv className=\"App\"\u003e\n  \u003cImgix\n    src=\"https://assets.imgix.net/examples/pione.jpg\"\n    sizes=\"calc(10% - 10px)\"\n    imgixParams={{ ar: \"16:9\" }}\n  /\u003e\n\u003c/div\u003e\n```\n\nThe aspect ratio is specified in the format `width:height`. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.\n\n#### Fixed Image Rendering (i.e. non-flexible)\n\nIf the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly.\n\n```js\nimport Imgix from \"react-imgix\";\n\n\u003cImgix\n  src=\"https://assets.imgix.net/examples/pione.jpg\"\n  width={100} // This sets what resolution the component should load from the CDN and the size of the resulting image\n  height={200}\n/\u003e;\n```\n\nFixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a srcset. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality).\nThis behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableQualityByDPR`.\n\n```js\n\u003cImgix\n  src=\"https://domain.imgix.net/image.jpg\"\n  width={100}\n  disableQualityByDPR\n/\u003e\n```\n\nwill generate the following srcset:\n\n```html\nhttps://domain.imgix.net/image.jpg?q=75\u0026w=100\u0026dpr=1 1x,\nhttps://domain.imgix.net/image.jpg?q=50\u0026w=100\u0026dpr=2 2x,\nhttps://domain.imgix.net/image.jpg?q=35\u0026w=100\u0026dpr=3 3x,\nhttps://domain.imgix.net/image.jpg?q=23\u0026w=100\u0026dpr=4 4x,\nhttps://domain.imgix.net/image.jpg?q=20\u0026w=100\u0026dpr=5 5x\n```\n\n[![Edit 4z1rzq04q7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/adoring-monad-dbxht)\n\n#### Background Mode\n\nImages can be rendered as a background behind children by using `\u003cBackground /\u003e`. The component will measure the natural size of the container as determined by the CSS on the page, and will render an optimal image for those dimensions.\n\nExample:\n\n```jsx\n// In CSS\n.blog-title {\n  width: 100vw;\n  height: calc(100vw - 100px);\n}\n\n// In Component (React)\nimport { Background } from 'react-imgix'\n\n\u003cBackground src=\"https://.../image.png\" className=\"blog-title\"\u003e\n  \u003ch2\u003eBlog Title\u003c/h2\u003e\n\u003c/Background\u003e\n```\n\nThis component shares a lot of props that are used in the main component, such as `imgixParams`, and `htmlAttributes`.\n\nAs the component has to measure the element in the DOM, it will mount it first and then re-render with an image as the background image. Thus, this technique doesn't work very well with server rendering. If you'd like for this to work well with server rendering, you'll have to set a width and height manually.\n\n**Set width and height:**\n\nSetting the width and/or height explicitly is recommended if you already know these beforehand. This will save the component from having to do two render passes, and it will render a background image immediately.\n\nThis is accomplished by passing `w` and `h` as props to imgixParams.\n\n```jsx\n\u003cBackground\n  src=\"https://.../image.png\"\n  imgixParams={{ w: 1920, h: 500 }}\n  className=\"blog-title\"\n\u003e\n  \u003ch2\u003eBlog Title\u003c/h2\u003e\n\u003c/Background\u003e\n```\n\n#### Picture Support\n\nUsing the [picture element](https://docs.imgix.com/tutorials/using-imgix-picture-element) you can create responsive images:\n\n```js\nimport Imgix, { Picture, Source } from \"react-imgix\";\n\n\u003cPicture\u003e\n  \u003cSource\n    src={src}\n    width={400}\n    htmlAttributes={{ media: \"(min-width: 768px)\" }}\n  /\u003e\n  \u003cSource\n    src={src}\n    width={200}\n    htmlAttributes={{ media: \"(min-width: 320px)\" }}\n  /\u003e\n  \u003cImgix src={src} imgixParams={{ w: 100 }} /\u003e\n\u003c/Picture\u003e\n```\n\nIn order to reduce the duplication in props, JSX supports object spread for props:\n\n```js\nimport Imgix, { Picture, Source } from \"react-imgix\";\n\nconst commonProps = {\n  src: \"https://...\",\n  imgixParams: {\n    fit: \"crop\",\n    crop: \"faces\",\n  },\n};\n\n\u003cPicture\u003e\n  \u003cSource\n    {...commonProps}\n    width={400}\n    htmlAttributes={{ media: \"(min-width: 768px)\" }}\n  /\u003e\n  \u003cSource\n    {...commonProps}\n    width={200}\n    htmlAttributes={{ media: \"(min-width: 320px)\" }}\n  /\u003e\n  \u003cImgix src={src} width={100} /\u003e\n\u003c/Picture\u003e\n```\n\nA warning is displayed when no fallback image is passed. This warning can be disabled in special circumstances. To disable this warning, look in the [warnings section](#warnings).\n\n#### ImgixProvider Component\n\nThe `\u003cImgixProvider\u003e` Higher Order Component (HOC), makes its [props](#props) available to any nested `\u003cImgix\u003e` component in your React application.\n\nFor example, by rendering `\u003cImgixProvider\u003e` at the top level of your application with `imgixParams` defined, all your `\u003cImgix\u003e` components will have access to the same `imgixParams`.\n\n```jsx\nimport React from \"react\";\nimport Imgix, { ImgixProvider } from \"react-imgix\";\nimport HomePage from \"./components/HomePage\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cheader className=\"App-header\"\u003e\n        \u003cImgixProvider imgixParams={{ ar: \"16:9\", fit: \"crop\" }}\u003e\n          \u003cdiv className=\"intro-blurb\"\u003e{/* ... */}\u003c/div\u003e\n          \u003cdiv className=\"gallery\"\u003e\n            \u003cImgix src=\"https://assets.imgix.net/examples/pione.jpg\" /\u003e\n            \u003cImgix src=\"https://sdk-test.imgix.net/ساندویچ.jpg\" /\u003e\n          \u003c/div\u003e\n        \u003c/ImgixProvider\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\nSo that the generated HTML looks something like\n\n```html\n\u003cdiv class=\"gallery\"\u003e\n  \u003cimg\n    src=\"https://assets.imgix.net/examples/pione.jpg?auto=format\u0026ar=16%3A9\u0026fit=crop\"\n    ...\n  /\u003e\n  \u003cimg\n    src=\"https://sdk-test.imgix.net/%D8%B3%D8%A7%D9%86%D8%AF%D9%88%DB%8C%DA%86.jpg?auto=format\u0026ar=16%3A9\u0026fit=crop\"\n    ...\n  /\u003e\n\u003c/div\u003e\n```\n\nYou can take advantage of this behavior to use partial URLs with the `\u003cImgix\u003e` component. By defining the [`domain`](#domain--string-optional) prop on the Provider, it can be made accessible to all nested `\u003cImgix\u003e` components.\n\n```jsx\n// inside App.jsx\n{\n  /*... */\n}\n\u003cImgixProvider domain=\"assets.imgix.net\"\u003e\n  \u003cdiv className=\"intro-blurb\"\u003e{/* ... */}s\u003c/div\u003e\n  \u003cdiv className=\"gallery\"\u003e\n    \u003cImgix src=\"/examples/pione.jpg\" /\u003e\n    \u003cImgix src=\"Office Background 1.png\" /\u003e\n  \u003c/div\u003e\n\u003c/ImgixProvider\u003e;\n{\n  /*... */\n}\n```\n\nBoth the `\u003cImgix\u003e` components above will access to the `domain` prop from the provider and have their relative `src` paths resolve to the same domain. So that the generated HTML looks something like:\n\n```html\n\u003cdiv class=\"gallery\"\u003e\n  \u003cimg src=\"https://assets.imgix.net/examples/pione.jpg\" ... /\u003e\n  \u003cimg\n    src=\"https://assets.imgix.net/Office%20Background%201.png?auto=format\"\n    ...\n  /\u003e\n\u003c/div\u003e\n```\n\nThe props that `\u003cImgixProvider\u003e` makes accessible can also be overridden by `\u003cImgix\u003e` components. Any prop defined on the `\u003cImgix\u003e` component will override the value set by the Provider.\n\n```jsx\n// inside App.jsx\n{\n  /*... */\n}\n\u003cImgixProvider imgixParams={{ ar: \"16:9\", fit: \"crop\" }}\u003e\n  \u003cdiv className=\"intro-blurb\"\u003e{/* ... */}s\u003c/div\u003e\n  \u003cdiv className=\"gallery\"\u003e\n    \u003cImgix\n      imgixParams={{ ar: \"4:2\" }}\n      src=\"https://assets.imgix.net/examples/pione.jpg\"\n    /\u003e\n    \u003cImgix src=\"https://sdk-test.imgix.net/ساندویچ.jpg\" /\u003e\n  \u003c/div\u003e\n\u003c/ImgixProvider\u003e;\n{\n  /*... */\n}\n```\n\nSo that the generated HTML looks something like this\n\n```html\n\u003cdiv class=\"gallery\"\u003e\n  \u003cimg\n    src=\"https://assets.imgix.net/examples/pione.jpg?auto=format\u0026ar=4%3A2\u0026fit=crop\"\n    ...\n  /\u003e\n  \u003cimg\n    src=\"https://sdk-test.imgix.net/%D8%B3%D8%A7%D9%86%D8%AF%D9%88%DB%8C%DA%86.jpg?ar=16%3A9\u0026fit=crop\"\n    ...\n  /\u003e\n\u003c/div\u003e\n```\n\nTo remove a shared prop from an `\u003cImgix\u003e` component, the same prop can be set to `undefined` on the component itself.\n\n```jsx\n// inside App.jsx\n{\n  /*... */\n}\n\u003cImgixProvider height={500}\u003e\n  \u003cdiv className=\"intro-blurb\"\u003e{/* ... */}s\u003c/div\u003e\n  \u003cdiv className=\"gallery\"\u003e\n    \u003cImgix src=\"https://assets.imgix.net/examples/pione.jpg\" /\u003e\n    \u003cImgix height={undefined} src=\"https://sdk-test.imgix.net/ساندویچ.jpg\" /\u003e\n  \u003c/div\u003e\n\u003c/ImgixProvider\u003e;\n{\n  /*... */\n}\n```\n\nSo that the generated HTML looks something like this:\n\n```html\n\u003cdiv class=\"gallery\"\u003e\n  \u003cimg src=\"https://assets.imgix.net/examples/pione.jpg?h=500\" ... /\u003e\n  \u003cimg\n    src=\"https://sdk-test.imgix.net/%D8%B3%D8%A7%D9%86%D8%AF%D9%88%DB%8C%DA%86.jpg\"\n    ...\n  /\u003e\n\u003c/div\u003e\n```\n\nYou can nest `ImgixProvider` components to ensure that different consumers have different props.\n\nFor example to give `Imgix` components different props from `Picture` components, you can nest an `ImgixProvider` inside of another one.\n\nThe nested Provider will change the Context for the `Picture` component, essentially removing their access to the shared props provided by the root `ImgixProvider`.\n\n```jsx\nimport React from 'react'\nimport Imgix, { ImgixProvider, Picture, Source } from \"react-imgix\";\nexport default function simpleImage() {\n  return (\n    \u003cdiv className=\"imgix-simple-api-example\"\u003e\n      {/* there props will be accessible to all the imgix components */}\n      \u003cImgixProvider\n        domain=\"assets.imgix.net\"\n        src=\"/examples/pione.jpg\"\n        imgixParams={{ fit: \"crop\" }}\n      \u003e\n        \u003cImgix width={200} height={500} src=\"/examples/pione.jpg\" /\u003e\n        \u003cImgix domain=\"sdk-test.imgix.net\" src=\"/ساندویچ.jpg\" /\u003e\n        \u003cImgixProvider\n          {/* since we define a new provider here, the context is redefined for any child components */}\n        \u003e\n          \u003cPicture\u003e\n            {/* imgixParams prop is no longer defined here */}\n            \u003cSource\n              width={100}\n              htmlAttributes={{ media: \"(min-width: 768px)\" }}\n            /\u003e\n            \u003cSource\n              width={200}\n              htmlAttributes={{ media: \"(min-width: 800px)\" }}\n            /\u003e\n            \u003cImgix src=\"/examples/pione.jpg\" /\u003e\n          \u003c/Picture\u003e\n        \u003c/ImgixProvider\u003e\n      \u003c/ImgixProvider\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Advanced Examples\n\n#### General Advanced Usage\n\nAlthough imgix is open to feature suggestions, we might not accept the feature if it is a very specific use case. The features below are examples of what we consider general advanced use cases. Our target here is to support 95% of all the usages of normal `img`, `picture`, and `source` elements.\n\nIf your desired feature falls outside this percentage, do not worry! You will probably still be able to achieve your feature with react-imgix's more powerful API: `buildURL`.\n\nThis library exposes a pure function, `buildURL`, for generating full imgix URLs given a base URL and some parameters.\n\n```jsx\nimport { buildURL } from \"react-imgix\";\n\nbuildURL(\"http://yourdomain.imgix.net/image.png\", { w: 450, h: 100 }); // =\u003e http://yourdomain.imgix.net/image.png?auto=format\u0026w=450\u0026h=100\u0026ixlib=react-x.x.x\n```\n\nThe base URL may also contain query parameters. These will be overridden by any parameters passed in with the second parameter.\n\nThis feature can be used to create your own custom `img` elements, or for use with other image components, such as [React-bootstrap's Image component](https://react-bootstrap.github.io/components/images/).\n\nThe `ixlib` parameter may be disabled by: `buildURL(\u003curl\u003e, \u003cparams\u003e, { disableLibraryParam: true })`\n\n#### Passing Custom HTML Attributes\n\nThis library allows the developer to pass any attribute they like to the underlying DOM element with `htmlAttributes`.\n\nFor example, if the the developer would like to attach a custom `onLoad` callback to an `img` component:\n\n```jsx\n\u003cImgix\n  src=\"...\"\n  sizes=\"...\"\n  htmlAttributes={{\n    onLoad: () =\u003e handleImgOnLoad,\n  }}\n/\u003e\n```\n\n#### Lazy Loading\n\nIf you'd like to lazy load images, we recommend using browser-level lazy loading, with the [`loading`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) property, passed in `htmlAttributes`:\n\n```jsx\n\u003cImgix\n  src=\"...\"\n  sizes=\"...\"\n  htmlAttributes={{\n    loading: \"lazy\"\n  }}\n/\u003e\n```\n\nThis property has [strong browser support](https://caniuse.com/loading-lazy-attr), and functions without additional JavaScript. Additionally, using browser-level lazy loading enables optimization of the sizes attribute with `sizes=\"auto\"`, which allows the browser to [automatically calculate the optimal size](https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/) for the image based on its layout. \n\nIf you need granular control over lazy-loading behavior such as loading distance, you can use the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).\n\nIf you are using a library like [lazysizes](https://github.com/aFarkas/lazysizes), you can tell the Imgix component to generate compatible attributes instead of the standard `src`, `srcset`, and `sizes` by changing some configuration settings:\n\n```jsx\n\u003cImgix\n  className=\"lazyload\"\n  src=\"...\"\n  sizes=\"...\"\n  attributeConfig={{\n    src: \"data-src\",\n    srcSet: \"data-srcset\",\n    sizes: \"data-sizes\",\n  }}\n/\u003e\n```\n\nThe same configuration is available for `\u003cSource /\u003e` components\n\n**NB:** It is recommended to use the [attribute change plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange) in order to capture changes in the data-\\* attributes. Without this, changing the props to this library will have no effect on the rendered image.\n\n#### Low Quality Image Placeholder Technique (LQIP)\n\nIf you'd like to use LQIP images, like before, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use react-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard `src`, `srcset`, and `sizes` by changing some configuration settings, and placing the fallback image src in the htmlAttributes:\n\n```jsx\n\u003cImgix\n  className=\"lazyload\"\n  src=\"...\"\n  sizes=\"...\"\n  attributeConfig={{\n    src: \"data-src\",\n    srcSet: \"data-srcset\",\n    sizes: \"data-sizes\",\n  }}\n  htmlAttributes={{\n    src: \"...\", // low quality image here\n  }}\n/\u003e\n```\n\n**NB:** If the props of the image are changed after the first load, the low quality image will replace the high quality image. In this case, the `src` attribute may have to be set by modifying the DOM directly, or the lazysizes API may have to be called manually after the props are changed. In any case, this behaviour is not supported by the library maintainers, so use at your own risk.\n\n#### Attaching Ref to DOM Elements\n\nA `ref` passed to react-imgix using `\u003cImgix ref={handleRef}\u003e` will attach the ref to the `\u003cImgix\u003e` instance, rather than the DOM element. It is possible to attach a ref to the DOM element that is rendered using `htmlAttributes`:\n\n```js\n\u003cImgix htmlAttributes={{ ref: handleRef }}\u003e\n```\n\nThis works for Source and Picture elements as well.\n\n### Props\n\n#### Shared Props (Imgix, Source)\n\nThese props are shared among Imgix and Source Components\n\n##### src :: string, required\n\nUsually in the form: `https://[your_domain].imgix.net/[image]`. Don't include any parameters.\n\n##### domain :: string, optional\n\nRequired only when using partial paths as `src` prop for a component. IE, if `src` is `\"/images/myImage.jpg\"`, then the `domain` prop needs to be defined.\n\n_For example_:\n\n```jsx\n\u003cImgix domain=\"assets.imgix.net\" src=\"/examples/pione.jpg\"\u003e\n```\n\n##### imgixParams :: object\n\n[imgix params](https://docs.imgix.com/apis/rendering) to add to the image `src`.\n\n_For example_:\n\n```js\n\u003cImgix imgixParams={{ mask: \"ellipse\" }} /\u003e\n```\n\n##### sizes :: string\n\nSpecified the developer's expected size of the image element when rendered on the page. Similar to width. E.g. `100vw`, `calc(50vw - 50px)`, `500px`. Highly recommended when not passing `width` or `height`. [Eric Portis' \"Srcset and sizes\"](https://ericportis.com/posts/2014/srcset-sizes/) article goes into depth on how to use the `sizes` attribute.\n\n##### className :: string\n\n`className` applied to top level component. To set `className` on the image itself see `htmlAttributes`.\n\n##### height :: number\n\nForce images to be a certain height.\n\n##### width :: number\n\nForce images to be a certain width.\n\n##### disableSrcSet :: bool, default = false\n\nDisable generation of variable width src sets to enable responsiveness.\n\n##### disableLibraryParam :: bool\n\nBy default this component adds a parameter to the generated url to help imgix with analytics and support for this library. This can be disabled by setting this prop to `true`.\n\n##### disablePathEncoding :: bool\n\nBy default this component encodes the url path in the src and srcSet. This can be disabled by setting this prop to `true`. For more information about how imgix path encoding works, please refer to the [imgix/js-core](https://github.com/imgix/js-core#disable-path-encoding) docs.\n\n##### htmlAttributes :: object\n\nAny other attributes to add to the html node (example: `alt`, `data-*`, `className`).\n\n##### onMounted :: func\n\nCalled on `componentDidMount` with the mounted DOM node as an argument.\n\n##### attributeConfig :: object\n\nAllows the src, srcset, and sizes attributes to be remapped to different HTML attributes. For example:\n\n```js\n  attributeConfig={{\n    src: 'data-src',\n    srcSet: 'data-srcset',\n    sizes: 'data-sizes'\n  }}\n```\n\nThis re-maps src to `data-src`, srcSet to `data-srcset`, etc.\n\n##### disableQualityByDPR :: bool, default = false\n\nDisable generation of variable `q` parameters when rendering a fixed-size image.\n\n##### srcSetOptions :: object\n\nAllows customizing the behavior of the srcset generation. Valid options are `widths`, `widthTolerance`, `minWidth`, `maxWidth`, and `devicePixelRatios`. See [@imgix/js-core](https://github.com/imgix/js-core#imgixclientbuildsrcsetpath-params-options) for documentation of these options.\n\n#### Picture Props\n\n##### className :: string\n\n`className` applied to top level component. To set `className` on the image itself see `htmlAttributes`.\n\n##### onMounted :: func\n\nCalled on `componentDidMount` with the mounted DOM node as an argument.\n\n##### htmlAttributes :: object\n\nAny other attributes to add to the html node (example: `alt`, `data-*`, `className`).\n\n#### Background Props\n\n##### src :: string, required\n\nUsually in the form: `https://[your_domain].imgix.net/[image]`. Don't include any parameters.\n\n##### imgixParams :: object\n\n[imgix](https://docs.imgix.com/apis/rendering) params to add to the image `src`. This is also how width and height can be explicitly set. For more information about this, see the \"Background\" section above.\n\n_For example_:\n\n```js\n\u003cBackground imgixParams={{ mask: \"ellipse\" }} /\u003e\n```\n\n##### className :: string\n\n`className` applied to top level component. To set `className` on the image itself see `htmlAttributes`.\n\n##### disableLibraryParam :: bool\n\nBy default this component adds a parameter to the generated url to help imgix with analytics and support for this library. This can be disabled by setting this prop to `true`.\n\n##### htmlAttributes :: object\n\nAny other attributes to add to the html node (example: `alt`, `data-*`, `className`).\n\n### Global Configuration\n\n#### Warnings\n\nThis library triggers some warnings under certain situations to try aid developers in upgrading or to fail-fast. These can sometimes be incorrect due to the difficulty in detecting error situations. This is annoying, and so there is a way to turn them off. This is not recommended for beginners, but if you are using custom components or other advanced features, it is likely you will have to turn them off.\n\nWarnings can be turned off with the public config API, `PublicConfigAPI`, which is exported at the top-level.\n\n```js\n// in init script/application startup\nimport { PublicConfigAPI } from \"react-imgix\";\n\nPublicConfigAPI.disableWarning('\u003cwarningName\u003e');\n\n//... rest of app startup\nReact.render(...);\n```\n\nWarnings can also be enabled with `PublicConfigAPI.enableWarning('\u003cwarningName\u003e')`\n\nThe warnings available are:\n\n| `warningName`  | Description                                                                                                                                                                                                                     |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| fallbackImage  | Triggered when there is no `\u003cimg\u003e` or `\u003cImgix\u003e` at the end of the children when using `\u003cPicture\u003e`. A fallback image is crucial to ensure the image renders correctly when the browser cannot match against the sources provided |\n| sizesAttribute | This library requires a `sizes` prop to be passed so that the images can render responsively. This should only turned off in very special circumstances.                                                                        |\n| invalidARFormat | Warnings thrown when the `ar` imgix parameter is not passed in the correct format (`w:h`)                                                                        |\n| oversizeImage | A runtime error triggered when an image loads with an intrinsic size substantially larger than the rendered size.                                |\n| lazyLCP | A runtime error triggered when an image is detected to be the [LCP element](https://web.dev/articles/lcp) but is loaded with `loading=\"lazy\"`.            |\n\n## Upgrade Guides\n\n### 8.x to 9.0\n\nThis release brings the react-imgix API more in-line with that of imgix's rendering service.\n\nThe largest change users will notice is that this project's component will no longer generate a default `fit=crop` parameter. The original intention behind this was that generated images would maintain aspect ratio when at least one of the dimensions were specified. However, the default imgix API behavior [sets `fit=clip`](https://docs.imgix.com/apis/url/size/fit#clip), which is now reflected in this project.\nAlthough this may not cause breaking changes for all users, it can result in unusual rendered image behavior in some cases. As such, we would rather err on the side of caution and provide users the ability to opt in to these changes via a major release.\n\nIf you are currently relying on the default generation of `fit=crop` when rendering images, you will now have to manually specify it when invoking the component:\n\n```jsx\n\u003cImgix\n  src=\"https://assets.imgix.net/examples/pione.jpg\"\n  sizes=\"100vw\"\n  imgixParams={{ fit: \"crop\" }}\n/\u003e\n```\n\nThe other major change relates to how the component determines an image's aspect ratio. Instead of appending a calculated height `h=` value based on specified dimensions, the URL string will now be built using the [imgix aspect ratio parameter](https://blog.imgix.com/2019/07/17/aspect-ratio-parameter-makes-cropping-even-easier) `ar=`. Luckily, the interface for specifying an aspect ratio is no different from before. However, users will have to pass in the `fit=crop` parameter in order for it to take effect:\n\n```jsx\n\u003cImgix\n  src=\"http://assets.imgix.net/examples/pione.jpg\"\n  width={400}\n  imgixParams={{ ar: \"2:1\", fit: \"crop\" }}\n/\u003e\n```\n\n### 7.x to 8.0\n\nThis is a very large update to this library with a lot of breaking changes. We apologise for any issues this may cause, and we have tried to reduce the number of breaking changes. We have also worked to batch up all these changes into one release to reduce its impacts. We do not plan on making breaking changes for a while after this, and will be focussed on adding features.\n\nThe largest change in this major version bump is the move to width-based `srcSet` and `sizes` for responsiveness. This has a host of benefits, including better server rendering, better responsiveness, less potential for bugs, and performance improvements. This does mean that the old fitting-to-container-size behaviour has been removed. If this is necessary, an example of how this can be achieved can be found [here](./examples/fit-to-size-of-container.md)\n\nTo upgrade to version 8, the following changes should be made.\n\n- A `sizes` prop should be added to all usages of `\u003cImgix\u003e`. If `sizes` is new to you (or even if it's not), Eric's [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-sizes/) is highly recommended.\n- Change all usages of `type='picture'` to `\u003cPicture\u003e` and `type='source'` to `\u003cSource\u003e`\n\n    \u003c!-- prettier-ignore-start --\u003e\n    ```jsx\n    // this...\n    \u003cImgix type='picture'\u003e\n      \u003cImgix type='source' src={src}\u003e\n      \u003cImgix type='source' src={src}\u003e\n    \u003c/Imgix\u003e\n\n    // becomes...\n    \u003cPicture\u003e\n      \u003cSource src={src}\u003e\n      \u003cSource src={src}\u003e\n    \u003c/Picture\u003e\n    ```\n\n    See [Picture support](#picture-support) for more information.\n    \u003c!-- prettier-ignore-end --\u003e\n\n- Remove all usage of `type='bg'` as it is no longer supported. It was decided that it was too hard to implement this feature consistently. If you would still like to use this feature, please give this issue a thumbs up: [https://github.com/imgix/react-imgix/issues/160](https://github.com/imgix/react-imgix/issues/160) If we get enough requests for this, we will re-implement it.\n- Remove props `aggressiveLoad`, `component`, `fluid`, `precision` as they are no longer used.\n- Change all usages of `defaultHeight` and `defaultWidth` to `width` and `height` props.\n- Rename `generateSrcSet` to `disableSrcSet` and invert the value passed down as the prop's value. i.e. `generateSrcSet={false}` becomes `disableSrcSet={true}` or simply `disableSrcSet`\n- If support is needed for a [browser which does not support the new usage of srcSet](https://caniuse.com/#feat=srcset) (such as IE 11), we recommended adding a polyfill, such as the great [Picturefill](https://github.com/scottjehl/picturefill).\n\n## Browser Support\n\n- By default, browsers that don't support [`srcset`](http://caniuse.com/#feat=srcset), [`sizes`](http://caniuse.com/#feat=srcset), or [`picture`](http://caniuse.com/#feat=picture) will gracefully fall back to the default `img` `src` when appropriate. If you want to provide a fully-responsive experience for these browsers, react-imgix works great alongside [Picturefill](https://github.com/scottjehl/picturefill)!\n- We support the latest version of Google Chrome (which [automatically updates](https://support.google.com/chrome/answer/95414) whenever it detects that a new version of the browser is available). We also support the current and previous major releases of desktop Firefox, Internet Explorer, and Safari on a rolling basis. Mobile support is tested on the most recent minor version of the current and previous major release for the default browser on iOS and Android (e.g., iOS 9.2 and 8.4). Each time a new version is released, we begin supporting that version and stop supporting the third most recent version.\n\nThis browser support is made possible by the great support from [BrowserStack](https://www.browserstack.com/).\n\n\u003cimg src=\"https://raw.githubusercontent.com/imgix/react-imgix/main/docs/images/Browserstack-logo%402x.png\" width=\"300\"\u003e\n\n## Contributors\n\n\u003c!-- ix-docs-ignore --\u003e\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/frederickfogerty\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/615334?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFrederick Fogerty\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=frederickfogerty\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/imgix/react-imgix/commits?author=frederickfogerty\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-frederickfogerty\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#question-frederickfogerty\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/sherwinski\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/15919091?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003esherwinski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=sherwinski\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/imgix/react-imgix/commits?author=sherwinski\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-sherwinski\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#question-sherwinski\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://jayeb.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/609840?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJason Eberle\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=jayeb\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/imgix/react-imgix/commits?author=jayeb\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-jayeb\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#question-jayeb\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://paulstraw.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/117288?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePaul Straw\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-paulstraw\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://kellysutton.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/47004?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKelly Sutton\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-kellysutton\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/rbliss\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/108509?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRichard Bliss\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=rbliss\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/imgix/react-imgix/commits?author=rbliss\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ekosz\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/212829?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEric Koslow\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=ekosz\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/imgix/react-imgix/commits?author=ekosz\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/baldurh\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1823617?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBaldur Helgason\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=baldurh\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/modosc\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/2231664?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ejonathan schatz\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=modosc\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://theo.sh\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/4714866?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTheo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=theolampert\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/tstirrat15\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/2581423?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTanner Stirrat\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=tstirrat15\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/imgix/react-imgix/issues?q=author%3Atstirrat15\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/nickhavenly\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/25750763?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNicholas Suski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=nickhavenly\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/minfawang\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/8814693?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003evoiceup\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=minfawang\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/kochis\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/814934?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCraig Kochis\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=kochis\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/dennisschaaf\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/116382?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDennis Schaaf\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=dennisschaaf\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://adkent.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/614?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndy Kent\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=andykent\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/GLosch\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/5502159?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGabby Losch\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=GLosch\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://stephencookdev.co.uk/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/8496655?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eStephen Cook\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=stephencookdev\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/imgix/react-imgix/issues?q=author%3Astephencookdev\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/enagorny\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/1202150?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEugene Nagorny\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=enagorny\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://samuelgil.es\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/2643026?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSamuel Giles\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=samuelgiles\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://espen.codes/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/48200?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEspen Hovlandsdal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=rexxars\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://danielfarrell.com/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/13850?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDaniel Farrell\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=danielfarrell\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://cieslak.dev\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/14146176?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLuiz Fernando da Silva Cieslak\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=luizcieslak\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/worldsoup\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/1475986?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNick Gottlieb\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=worldsoup\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/pgrimaud\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1866496?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePierre Grimaud\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=pgrimaud\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.luisball.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16711614?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLuis H. Ball Jr.\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/imgix/react-imgix/commits?author=luqven\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\u003c!-- /ix-docs-ignore --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome, but please review the [contribution guidelines](./CONTRIBUTING.md) before getting started!\n\n## Meta\n\nReact-imgix was originally created by [Frederick Fogerty](http://twitter.com/fredfogerty). It's licensed under the ISC license (see the [license file](./LICENSE) for more info).\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Freact-imgix.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Freact-imgix?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimgix%2Freact-imgix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimgix%2Freact-imgix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimgix%2Freact-imgix/lists"}