{"id":13481546,"url":"https://github.com/tvthatsme/react-power-picture","last_synced_at":"2025-03-27T12:31:00.966Z","repository":{"id":57342631,"uuid":"135445131","full_name":"tvthatsme/react-power-picture","owner":"tvthatsme","description":"Zero-dependency React component for progressively loading your images","archived":true,"fork":false,"pushed_at":"2019-08-10T14:05:04.000Z","size":1601,"stargazers_count":10,"open_issues_count":19,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T15:50:54.718Z","etag":null,"topics":["images","loading","performance","progressive","react","render-props","responsive"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-power-picture","language":"JavaScript","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/tvthatsme.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":"2018-05-30T13:15:27.000Z","updated_at":"2024-04-23T07:16:03.000Z","dependencies_parsed_at":"2022-09-13T02:22:45.151Z","dependency_job_id":null,"html_url":"https://github.com/tvthatsme/react-power-picture","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvthatsme%2Freact-power-picture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvthatsme%2Freact-power-picture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvthatsme%2Freact-power-picture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvthatsme%2Freact-power-picture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tvthatsme","download_url":"https://codeload.github.com/tvthatsme/react-power-picture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245844849,"owners_count":20681790,"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":["images","loading","performance","progressive","react","render-props","responsive"],"created_at":"2024-07-31T17:00:52.695Z","updated_at":"2025-03-27T12:31:00.632Z","avatar_url":"https://github.com/tvthatsme.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Media"],"readme":"# React Power Picture\n\n[![Build Status](https://travis-ci.org/tvthatsme/react-power-picture.svg?branch=master)](https://travis-ci.org/tvthatsme/react-power-picture)\n[![Coverage Status](https://coveralls.io/repos/github/tvthatsme/react-power-picture/badge.svg?branch=master)](https://coveralls.io/github/tvthatsme/react-power-picture?branch=master)\n[![npm version](https://badge.fury.io/js/react-power-picture.svg)](https://badge.fury.io/js/react-power-picture)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nZero-dependency React component for progressively loading your images with as much responsiveness as you need. All the power is given to you for extending or wrapping to meet your use case. Serviced by a render prop for excellent integration with all your projects.\n\n## The problem\n\nYou don't want to load huge images for mobile users but mapping everything in image srcset\nis verbose. You also want to be able to track the loading state of the image so that you\ncan apply styles for a smooth user interface.\n\n## This solution\n\nThis is a component that handles all the `srcset` and responsive image setup for you while keeping track of `loading` state so that you can worry about making the rest of your page load fast. It uses a [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) which gives you maximum flexibility with a minimal API because you are responsible for the rendering of everything and you simply apply props to what you're rendering. Use this component together with your own taste in styles to acheive effects like [Medium's Blur Effect](https://jmperezperez.com/medium-image-progressive-loading-placeholder/). The implementation is up to you! The heavy lifting (not so heavy actually...) is up to us.\n\n## Installation\n\nThis module is distributed via [npm](https://www.npmjs.com/) which is bundled with [node](https://nodejs.org/) and\nshould be installed as one of your project's `dependencies`:\n\n```\nnpm install --save react-power-picture\n```\n\n\u003e This package also depends on `react` and `prop-types`. Please make sure you\n\u003e have those installed as well.\n\n## Usage\n\n[![Edit v06l97zxyy](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/v06l97zxyy)\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport PowerPicture from 'react-power-picture';\n\nconst sources = [\n  {\n    size: 400,\n    src: 'https://source.unsplash.com/random/200x140'\n  },\n  {\n    size: 800,\n    src: 'https://source.unsplash.com/random/300x200'\n  },\n  {\n    size: 1200,\n    src: 'https://source.unsplash.com/random/400x300'\n  }\n];\n\nrender(\n  \u003cPowerPicture sources={sources}\u003e\n    {(image, loading) =\u003e (\n      \u003cdiv\u003e\n        \u003cp\u003eLoading state: {loading.toString()}\u003c/p\u003e\n        \u003cimg alt=\"A p!cture is worth a thousand words\" src={image} /\u003e\n      \u003c/div\u003e\n    )}\n  \u003c/PowerPicture\u003e,\n  document.getElementById('root')\n);\n```\n\n\u003cPowerPicture /\u003e is the only component. It doesn't render anything itself, it just calls the render function and renders that. Use this to create anything you'd like to!\n\n## Props\n\n\u003c!-- This table was generated via http://www.tablesgenerator.com/markdown_tables --\u003e\n\n| prop      | type     | description                                                                                                                                                                                                                     |\n| --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `sources` | array    | An array of objects, each one with a `size` and `src` key, value pair. React Power Picture uses this source map and the windows width to determine the optimal image to load given the number of object that the prop provides. |\n| `source`  | string   | A url string for an image. Use this prop if you only have one image size for all device sizes.                                                                                                                                  |\n| `onError` | function | Optional callback method that is triggered if there is an error loading the image.                                                                                                                                              |\n\n## Examples\n\nA live example of this in action can be found on the [project's GitHub page](https://tvthatsme.github.io/react-power-picture).\n\n## Inspiration\n\nThis project has been heavily inspired by the work of Formidable Labs and their [react-progressive-image](https://github.com/FormidableLabs/react-progressive-image) library. It does many things exactly right but did not provide the responsive solution (`srcset`) that I was originally looking for.\n\nAnother shoutout to the [react-simple-image](https://github.com/bitjourney/react-simple-image) library. This project has everything for responsive images loaded as a `srcset` but with much broader prop support and less render flexibiliy.\n\nYou might consider React Power Picture to be a marriage of the two. My goal for this library to provide both progressive and responsive power.\n\n## Other solutions\n\nThere are many other React image-related components that you might want to consider before choosing `react-power-picture`. They all have different use cases, and many of them make opinionated choices in dependencies and/or peer-dependencies. This library will always take the approach of simplicity and flexibility over extended functionality. Do one thing and do it well. If you want to wrap or extend `react-power-picture` with extra functionality such as network speed detection, element in view, or other features, please extend this work or take a look at the following similar solutions.\n\n- [react-progressive-image](https://github.com/FormidableLabs/react-progressive-image)\n- [react-lazyload](https://github.com/jasonslyvia/react-lazyload)\n- [react-lazy-image](https://github.com/sergiodxa/react-lazy-image)\n- [react-image](https://github.com/mbrevda/react-image)\n- [react-lazy-load](https://github.com/loktar00/react-lazy-load)\n- [react-graceful-image](https://github.com/linasmnew/react-graceful-image)\n- [react-worker-image](https://github.com/nitish24p/react-worker-image)\n- [react-simple-image](https://github.com/bitjourney/react-simple-image)\n\nIf you know of more, please feel free to raise a PR :smile:\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftvthatsme%2Freact-power-picture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftvthatsme%2Freact-power-picture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftvthatsme%2Freact-power-picture/lists"}