{"id":21328748,"url":"https://github.com/braposo/react-responsive-picture","last_synced_at":"2025-04-09T22:13:04.384Z","repository":{"id":19161304,"uuid":"85695033","full_name":"braposo/react-responsive-picture","owner":"braposo","description":"A future-proof responsive image component that supports latest Picture specification","archived":false,"fork":false,"pushed_at":"2023-01-03T18:27:48.000Z","size":2390,"stargazers_count":101,"open_issues_count":25,"forks_count":9,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-09T22:12:58.944Z","etag":null,"topics":["image","picture","picturefill","react","react-component","responsive"],"latest_commit_sha":null,"homepage":null,"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/braposo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-21T11:43:09.000Z","updated_at":"2024-01-26T15:03:09.000Z","dependencies_parsed_at":"2023-01-14T00:15:10.736Z","dependency_job_id":null,"html_url":"https://github.com/braposo/react-responsive-picture","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/braposo%2Freact-responsive-picture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/braposo%2Freact-responsive-picture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/braposo%2Freact-responsive-picture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/braposo%2Freact-responsive-picture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/braposo","download_url":"https://codeload.github.com/braposo/react-responsive-picture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119292,"owners_count":21050755,"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":["image","picture","picturefill","react","react-component","responsive"],"created_at":"2024-11-21T21:41:08.354Z","updated_at":"2025-04-09T22:13:04.361Z","avatar_url":"https://github.com/braposo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-responsive-picture\n\nA future-proof responsive image component that supports latest `\u003cpicture\u003e` specification. Uses [picturefill](https://github.com/scottjehl/picturefill) for backward compatibility from IE9+.\n\n[![npm version][version-badge]][npm]\n[![npm downloads][downloads-badge]][npm]\n[![gzip size][size-badge]][size]\n[![MIT License][license-badge]][license]\n[![PRs Welcome][prs-badge]][prs]\n\n---\n\n## Installation\n\n`npm install react-responsive-picture` or `yarn add react-responsive-picture`\n\n## Playground\n\n[![Edit react-responsive-picture][codesandbox-badge]][codesandbox]\n\nYou can also run the examples by cloning the repo and running `yarn start`.\n\n### Usage\n\n```jsx\nimport { Picture } from 'react-responsive-picture';\n\nfunction SomeComponent() {\n    return (\n        \u003cPicture\n            sources = {[\n                {\n                    srcSet: \"path-to-mobile-image.jpg, path-to-mobile-image@2x.jpg 2x\",\n                    media: \"(max-width: 420px)\",\n                },\n                {\n                    srcSet: \"path-to-desktop-image.jpg 1x, path-to-desktop-image@2x.jpg 2x\",\n                },\n                {\n                    srcSet: \"path-to-desktop-image.webp\",\n                    type: \"image/webp\"\n                }\n            ]}\n        /\u003e\n    );\n}\n```\n\n### Props\n\n| Prop | Type | Default | Definition |\n| --- | --- | --- | --- |\n| sources | array |  | The array of source objects. Check Sources section for more information. |\n| src | string | (transparent pixel) | Source for standalone/fallback image. To prevent issues in some browsers, by default `src` is set to a 1x1 transparent pixel data image. |\n| sizes | string |  | Sizes attribute to be used with `src` for determing best image for user's viewport. |\n| alt | string |  | Alternative text for image |\n| className | string | | Any additional CSS classes you might want to use to style the image |\n\n## Examples\n\n### Simple image\nNormal `\u003cimg\u003e` like behaviour. The same image is displayed on every device/viewport.\n\n```jsx\n\u003cPicture src=\"path-to-image.jpg\" /\u003e\n```\n\nwill render:\n\n```html\n\u003cimg srcset=\"path-to-image.jpg\" /\u003e\n```\n\n### Image with different resolutions\nDifferent images for specific devices (usually retina).\n\n```jsx\n\u003cPicture src=\"path-to-image@2x.png 2x, path-to-image.png 1x\" /\u003e\n```\n\nwill render:\n\n```html\n\u003cimg srcset=\"path-to-image@2x.png 2x, path-to-image.png 1x\" /\u003e\n```\n\n### Image with sizes\nWhen you want to let the browser determine the best image for user's current viewport. More information about `size` attribute on this great [blog post](http://ericportis.com/posts/2014/srcset-sizes/).\n\n```jsx\n\u003cPicture\n    src=\"large.jpg 1024w, medium.jpg 640w, small.jpg 320w\"\n    sizes=\"(min-width: 36em) 33.3vw, 100vw\"\n/\u003e\n```\n\nwill render:\n\n```html\n\u003cimg srcset=\"large.jpg 1024w, medium.jpg 640w, small.jpg 320w\" sizes=\"(min-width: 36em) 33.3vw, 100vw\" /\u003e\n```\n\n### Image with art direction\nWhen you want to explicitly control which image is displayed at specific viewport sizes.\n\n```jsx\n\u003cPicture\n    sources = {[\n        {\n            srcSet: \"path-to-mobile-image.jpg, path-to-mobile-image@2x.jpg 2x\",\n            media: \"(max-width: 420px)\",\n        },\n        {\n            srcSet: \"path-to-desktop-image.jpg 1x, path-to-desktop-image@2x.jpg 2x\",\n        },\n        {\n            srcSet: \"path-to-desktop-image.webp\",\n            type: \"image/webp\"\n        }\n    ]}\n/\u003e\n```\n\nwill render:\n\n```html\n\u003cpicture\u003e\n    \u003csource srcset=\"path-to-mobile-image.jpg, path-to-mobile-image@2x.jpg 2x\" media=\"(max-width: 420px)\"\u003e\n    \u003csource srcset=\"path-to-desktop-image.jpg 1x, path-to-desktop-image@2x.jpg 2x\"\u003e\n    \u003csource srcset=\"path-to-desktop-image.webp\" type=\"image/webp\"\u003e\n    \u003cimg srcset=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" /\u003e\n\u003c/picture\u003e\n```\n\nThe `sources` prop is where you can determine the behaviour of the `\u003cPicture\u003e` component and which images will show for the specific screens.\n\nFor each source you can send an object containing `srcSet`, `media` and `type` although the last two are optional.\n\n### Styling \n\nYou can use your favourite styling library and style the `Picture` component using the `className` prop.\n\n```jsx\nimport { css } from \"emotion\";\n\n\u003cPicture \n    className={css`\n      opacity: 0.7;\n    `}\n    src=\"path-to-image@2x.png 2x, path-to-image.png 1x\" \n/\u003e\n```\n\n## Fullsize images\n\nThere's also a `\u003cFullsizePicture\u003e` component that you can use to display full-size images using the same benefits of `\u003cPicture\u003e` for art direction.\n\n```jsx\n\u003cdiv style={{ height: 200 }}\u003e\n    \u003cFullsizePicture\n        sources = {[\n            {\n                srcSet: \"path-to-mobile-image.jpg, path-to-mobile-image@2x.jpg 2x\",\n                media: \"(max-width: 420px)\",\n            },\n            {\n                srcSet: \"path-to-desktop-image.jpg 1x, path-to-desktop-image@2x.jpg 2x\",\n            },\n        ]}\n    /\u003e\n\u003c/div\u003e\n```\n\nIt will automatically fill the parent element maintaining the original image ratio. Please note that the parent element needs to have a defined height as you would expect for any background image as well.\n\n### Props\n\n`FullsizePicture` accepts the same props as `Picture` plus a few more for styling and positioning.\n\n| Prop | Type | Default | Definition |\n| --- | --- | --- | --- |\n| sources | array |  | The array of source objects. Check Sources section for more information. |\n| src | string | (transparent pixel) | Source for standalone/fallback image. To prevent issues in some browsers, by default `src` is set to a 1x1 transparent pixel data image. |\n| sizes | string |  | Sizes attribute to be used with `src` for determing best image for user's viewport. |\n| alt | string |  | Alternative text for image |\n| className | string | | Any additional CSS classes you might want to use to style the image |\n| wrapperClassName | string | | Any additional CSS classes you might want to use to style the wrapper of the `Picture` component |\n| cover | \"both\" \\| \"width\" \\| \"height\" | \"both\" | Decides the fullsize behaviour of the `Picture` component. By default it covers the entire parent, but can be changed to cover just the height or width instead. |\n| center | boolean | true | Helper prop to horizontally and vertically center the image. |\n\n### Use as background image\n\nIf you want to use `FullsizePicture` as a background image for other components, you can pass them as children too.\n\n```jsx\n\u003csection style={{ height: 200 }}\u003e\n    \u003cFullsizePicture\n        sources = {[\n            {\n                srcSet: \"path-to-mobile-image.jpg, path-to-mobile-image@2x.jpg 2x\",\n                media: \"(max-width: 420px)\",\n            },\n            {\n                srcSet: \"path-to-desktop-image.jpg 1x, path-to-desktop-image@2x.jpg 2x\",\n            },\n        ]}\n    \u003e\n      \u003cHeading1\u003eThis is the section title\u003c/Heading1\u003e\n    \u003c/FullsizePicture\u003e\n\u003c/section\u003e\n```\n\n## Contributing\n\nPlease follow our [contributing guidelines](https://github.com/braposo/react-responsive-picture/blob/master/CONTRIBUTING.md).\n\n## License\n\n[MIT](https://github.com/braposo/react-responsive-picture/blob/master/LICENSE)\n\n[npm]: https://www.npmjs.com/package/react-responsive-picture\n[license]: https://github.com/braposo/react-responsive-picture/blob/master/LICENSE\n[prs]: http://makeapullrequest.com\n[size]: https://unpkg.com/react-responsive-picture/dist/react-responsive-picture.min.js\n[version-badge]: https://img.shields.io/npm/v/react-responsive-picture.svg?style=flat-square\n[downloads-badge]: https://img.shields.io/npm/dm/react-responsive-picture.svg?style=flat-square\n[license-badge]: https://img.shields.io/npm/l/react-responsive-picture.svg?style=flat-square\n[size-badge]: http://img.badgesize.io/https://unpkg.com/react-responsive-picture/dist/react-responsive-picture.min.js?compression=gzip\u0026style=flat-square\n[modules-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[codesandbox-badge]: https://codesandbox.io/static/img/play-codesandbox.svg\n[codesandbox]: https://codesandbox.io/s/react-responsive-picture-playground-e6kbv\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbraposo%2Freact-responsive-picture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbraposo%2Freact-responsive-picture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbraposo%2Freact-responsive-picture/lists"}