{"id":17772631,"url":"https://github.com/jamesplease/react-media-ui","last_synced_at":"2026-01-27T19:48:57.694Z","repository":{"id":48631255,"uuid":"381824908","full_name":"jamesplease/react-media-ui","owner":"jamesplease","description":null,"archived":false,"fork":false,"pushed_at":"2021-07-16T21:10:24.000Z","size":729,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-04T21:50:37.007Z","etag":null,"topics":[],"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/jamesplease.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-06-30T20:27:40.000Z","updated_at":"2021-07-16T21:02:39.000Z","dependencies_parsed_at":"2022-09-06T00:22:17.008Z","dependency_job_id":null,"html_url":"https://github.com/jamesplease/react-media-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jamesplease/react-media-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Freact-media-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Freact-media-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Freact-media-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Freact-media-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesplease","download_url":"https://codeload.github.com/jamesplease/react-media-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Freact-media-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28819831,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T18:44:20.126Z","status":"ssl_error","status_checked_at":"2026-01-27T18:44:09.161Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-10-26T21:40:11.075Z","updated_at":"2026-01-27T19:48:57.678Z","avatar_url":"https://github.com/jamesplease.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Media UI\n\n[![npm version](https://img.shields.io/npm/v/react-media-ui.svg?color=brightgreen)](https://www.npmjs.com/package/react-media-ui)\n\nTwo React components: one for images, one for video.\n\n## Motivation\n\nWhen images load slowly on the web they will suddenly appear after they have loaded. Or, if\nthe image is interlaced, it might load in slowly from top to bottom.\n\nVideos behave similarly, and although the built-in video element supports a poster (an\nimage that appears while the video loads), the poster immediately disappears once the\nvideo has finished loading.\n\nThis library provides a different behavior: the image component will fade in if it takes\ntoo long to download, while the video element will cross fade between the poster and the\nvideo.\n\n## Installation\n\nInstall using [npm](https://www.npmjs.com):\n\n```\nnpm install react-media-ui\n```\n\nor [yarn](https://yarnpkg.com/):\n\n```\nyarn add react-media-ui\n```\n\nThis library includes a CSS file that must be imported one time. Typically you'll want to bundle\nthis with the rest of the CSS in your project.\n\n```js\nimport 'react-media-ui/style.css';\n```\n\n## Table of Contents\n\n- [**API Reference**](#api-reference)\n  - [\\\u003cImage/\\\u003e](#image-)\n  - [\\\u003cVideo/\\\u003e](#video-)\n- [**Guides**](#guides)\n  - [Best Practices](#best-practices)\n  - [Image Placeholder](#image-placeholder)\n  - [Video Element Performance](#video-element-performance)\n- [**Troubleshooting**](#troubleshooting)\n\n## API Reference\n\n### `\u003cImage /\u003e`\n\nRenders an image. If the image takes a moment to load, then it will fade in once it has loaded.\n\nThe `Image` component accepts all of the same props as `\u003cimg/\u003e`.\n\nIt also accepts a few additional props that most people won't need to use. All of these additional props are optional:\n\n| Prop             | Type   | Default value | Description                                                                                                                                            |\n| ---------------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `threshold`      | number | `0.35`        | If the image loads faster than this value, then it will not fade in. Specified in units of seconds.                                                    |\n| `duration`       | number | `0.25`        | The duration of the fade animation in seconds.                                                                                                         |\n| `timingFunction` | string | `'ease-out'`  | The timing function for the fade animation. [View all valid values here](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function). |\n\n```jsx\n// This CSS file must be imported just a single time\nimport 'react-media-ui/style.css';\nimport { Image } from 'react-media-ui';\n\nexport default function App() {\n  return \u003cImage src=\"dog.jpg\" alt=\"A dog jumping.\" /\u003e;\n}\n```\n\n### `\u003cVideo /\u003e`\n\nRenders a video with an optional poster image, which displays until the video has loaded. After the video has ended the\nposter image will be fade in again.\n\nThe `\u003cVideo\u003e` component accepts all of the same props as `\u003cvideo/\u003e`. It also accepts a few more, all of which are optional:\n\n| Prop         | Type         | Default value | Description                                                                                             |\n| ------------ | ------------ | ------------- | ------------------------------------------------------------------------------------------------------- |\n| `poster`     | string       | `undefined`   | A URL of an image to display while the video loads.                                                     |\n| `mountVideo` | boolean      | `true`        | Pass `false` and the video will not be mounted. This can be useful for performance [in certain contexts](#video-element-performance). |\n| `imgProps`   | `ImageProps` | `undefined`   | Props that are passed to the underlying `\u003cImage/\u003e` element that is used for the poster.                 |\n\n```jsx\n// This CSS file must be imported just a single time\nimport 'react-media-ui/style.css';\nimport { Video } from 'react-media-ui';\n\nexport default function App() {\n  return (\n    \u003cVideo\n      src=\"dog.mp4\"\n      poster=\"dog.jpg\"\n      imgProps={{\n        alt: 'A dog jumping.',\n      }}\n    /\u003e\n  );\n}\n```\n\n## Guides\n\n### Best Practices\n\nAlways style your images and videos to have fixed dimensions. That way, they don't\ncause the layout of the app to change as assets load in. Also, it allows you to use a\nplaceholder for your images. (Read the following guide for more!)\n\nIn older browsers, you can specify dimensions using `width` and `height`. In newer\nbrowsers, you can specify just one of these along with\n[`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio). You may\nprefer to use `aspect-ratio` in certain situations, such as 16/9 videos.\n\n```css\n.my-video {\n  width: 100vw;\n  aspect-ratio: 16/9;\n}\n```\n\n### Image Placeholder\n\nYou may wish to display a placeholder color while the image loads. You can\naccomplish this using CSS.\n\n```js\n\u003cImage\n  className=\"my-image\"\n  src=\"dog.jpg\"\n  alt=\"A dog jumping.\"\n/\u003e\n```\n\n```css\n.my-image {\n  /*\n    Give it explicit dimensions so that it takes up space\n    even while the image is loading in\n  */\n  width: 120px;\n  aspect-ratio: 5/8;\n\n  /* Specify a background color */\n  background: #ccc;\n\n  /*\n    You can also round the corners, or do whatever else\n    you would like!\n  */\n  border-radius: 6px;\n  overflow: hidden;\n}\n```\n\nA placeholder background image can be accomplished using this same strategy\n(see: [background-image on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)), although\nyou will want to be mindful of the image's file size.\n\n### Video Element Performance\n\nSome apps may require swapping out `\u003cVideo/\u003e` elements as a user navigates. If they navigate quickly, then the mounting and unmounting of the underlying video element can\noccur rapidly. This can be a problem because mounting and unmounting video elements too rapidly can cause sluggish performance.\n\nTo avoid this problem, you can use the `mountVideo` prop.\n\nWhen the user navigates, set `mountVideo` to `false`. This makes it so that just the poster image mounts. Then, if the user doesn't navigate again after, say, 400ms, set `mountVideo`\nback to `true`. This technique ensures that even users who are navigating very quickly will not cause rapid mounting and unmounting of video elements.\n\n## Troubleshooting\n\n### The components aren't displaying as I would expect\n\nDid you remember to import the CSS file?\n\n```js\nimport 'react-media-ui/style.css';\n```\n\n### Animations aren't working\n\nIt might be worth doing a quick check that the CSS file was imported.\n\n```js\nimport 'react-media-ui/style.css';\n```\n\n### I'm still having issues\n\n[Open an issue](https://github.com/jamesplease/react-media-ui/issues/new) and I'll try my best to help out!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Freact-media-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesplease%2Freact-media-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Freact-media-ui/lists"}