{"id":15391515,"url":"https://github.com/skovy/react-suspense-img","last_synced_at":"2025-04-15T23:20:32.031Z","repository":{"id":44042985,"uuid":"222160776","full_name":"skovy/react-suspense-img","owner":"skovy","description":"🖼 A simple React image component that suspends while loading","archived":false,"fork":false,"pushed_at":"2022-12-04T20:46:01.000Z","size":606,"stargazers_count":20,"open_issues_count":26,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T02:34:14.035Z","etag":null,"topics":["concurrent","image","react","resource","suspense"],"latest_commit_sha":null,"homepage":"https://react-suspense-img.netlify.com","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/skovy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-16T21:21:01.000Z","updated_at":"2025-02-15T16:23:32.000Z","dependencies_parsed_at":"2023-01-22T23:30:36.431Z","dependency_job_id":null,"html_url":"https://github.com/skovy/react-suspense-img","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skovy%2Freact-suspense-img","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skovy%2Freact-suspense-img/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skovy%2Freact-suspense-img/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skovy%2Freact-suspense-img/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skovy","download_url":"https://codeload.github.com/skovy/react-suspense-img/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249168388,"owners_count":21223678,"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":["concurrent","image","react","resource","suspense"],"created_at":"2024-10-01T15:11:33.502Z","updated_at":"2025-04-15T23:20:32.016Z","avatar_url":"https://github.com/skovy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![npm version](https://img.shields.io/npm/v/react-suspense-img)\n[![Build Status](https://travis-ci.org/skovy/react-suspense-img.svg?branch=master)](https://travis-ci.org/skovy/react-suspense-img)\n\n**️⚠️ Please note this package relies on experimental React features that are not yet available in a stable release. By definition, this means this package is also experimental. See [the React documentation on current mode for more details](https://reactjs.org/docs/concurrent-mode-intro.html).**\n\n# 🖼 react-suspense-img\n\nA simple React image component that suspends while loading.\n\n## Usage\n\nInstall the package.\n\n```bash\nyarn add react-suspense-img\n```\n\nImport the `Img` component and image `resource` cache.\n\n```tsx\nimport { Img, resource } from 'react-suspense-img';\n```\n\nUse the `Img` component as you would a standard `img` element. However, ensure to wrap it (at the desired place in the tree) with a `ErrorBoundary` and `React.Suspense`. The `Img` component will suspend (while loading) or throw an error (if an error occurred loading the image).\n\n```tsx\n// Start fetching early, following the render-as-you-fetch pattern.\nresource.preloadImage('https://placekitten.com/12/34');\n\nconst Component = () =\u003e (\n  \u003cErrorBoundary\u003e\n    \u003cReact.Suspense fallback=\"Loading...\"\u003e\n      \u003cImg src=\"https://placekitten.com/12/34\" width={64} alt=\"Kitten\" /\u003e\n    \u003c/React.Suspense\u003e\n  \u003c/ErrorBoundary\u003e\n);\n```\n\nWant to see examples of what this could look like? See some of\n[the examples here](https://react-suspense-img.netlify.com/).\n\n## API\n\n### `\u003cImg /\u003e`\n\nA small component that wraps `img` but suspends while the image is loading.\n\n#### Props\n\n- `src`: the only required prop, the image source to display.\n- `...`: all of the standard image props, for example `alt`, `className`, etc.\n\n### `resource`\n\nThe image resource to cache images and determine if a given image has loaded\nor if it needs to suspend.\n\n#### Methods\n\n- `preloadImage(src: string)`: preload the given source image. This is the only\n  method that is necessary to use. This should be called before using the given\n  `src` with the `Img` component to follow the\n  [render-as-you-fetch pattern](https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense).\n- `read(src: string)`: read a given source from the cache. If it has not loaded\n  it will throw a promise. If it has errored it will throw an error. If it has\n  loaded it will return the source. This method is used within the `Img`\n  component and should never need to be called directly.\n- `clear()`: clear the entire image resource cache. This may be useful for\n  running between tests to always start with an empty cache.\n\n## Credit\n\n- Built with [TSDX](https://github.com/jaredpalmer/tsdx).\n- Inspired by [`relay-experimental`](https://github.com/facebook/relay/tree/b9d272d58a7101a955e951c735034d39669b40b7/packages/relay-experimental).\n- Inspired by [`suspense-experimental-github-demo`](https://github.com/gaearon/suspense-experimental-github-demo).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskovy%2Freact-suspense-img","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskovy%2Freact-suspense-img","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskovy%2Freact-suspense-img/lists"}