{"id":15657378,"url":"https://github.com/danmindru/react-responsive-iframe-viewer","last_synced_at":"2026-03-06T02:47:07.663Z","repository":{"id":220997105,"uuid":"753160333","full_name":"danmindru/react-responsive-iframe-viewer","owner":"danmindru","description":"A React component to view iframe content in a responsive, resizable container \u0026 easily switch between devices","archived":false,"fork":false,"pushed_at":"2025-04-03T17:03:59.000Z","size":141,"stargazers_count":30,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-08T16:59:50.734Z","etag":null,"topics":["device-viewer","react","viewer"],"latest_commit_sha":null,"homepage":"https://react-responsive-iframe-viewer.vercel.app/","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/danmindru.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-02-05T15:31:50.000Z","updated_at":"2025-11-04T14:16:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"69d6ea03-3dec-4cb3-bc0d-51fa502d0644","html_url":"https://github.com/danmindru/react-responsive-iframe-viewer","commit_stats":null,"previous_names":["danmindru/react-responsive-iframe-viewer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danmindru/react-responsive-iframe-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Freact-responsive-iframe-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Freact-responsive-iframe-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Freact-responsive-iframe-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Freact-responsive-iframe-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danmindru","download_url":"https://codeload.github.com/danmindru/react-responsive-iframe-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Freact-responsive-iframe-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30159969,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T22:39:40.138Z","status":"online","status_checked_at":"2026-03-06T02:00:08.268Z","response_time":250,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["device-viewer","react","viewer"],"created_at":"2024-10-03T13:06:31.619Z","updated_at":"2026-03-06T02:47:07.632Z","avatar_url":"https://github.com/danmindru.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Screenshot showing responsive iframe viewer demo](https://github.com/danmindru/react-responsive-iframe-viewer/assets/1515742/cbc09f80-f9a7-4a3a-ba23-1dd8b9b7fe47)\n\n![Screenshot showing multiple demos, including dark mode](https://github.com/danmindru/react-responsive-iframe-viewer/assets/1515742/94a50b53-0344-4b91-bec6-1c4d33034f9b)\n\n\n# React Responsive Iframe Viewer\n[![npm version](https://badge.fury.io/js/react-responsive-iframe-viewer.svg)](https://badge.fury.io/js/react-responsive-iframe-viewer)\n\nView iframe content in a responsive container that can:\n\n- Switch between common devices sizes\n  - Mobile\n  - Tablet\n  - Desktop\n- Resize using the provided handles\n- ✨ all animated \u0026 pretty\n- 🌚 and with dark mode support\n\n\n[Demo 🚀](https://react-responsive-iframe-viewer.vercel.app/) / [Usage examples 👨‍💻](https://github.com/danmindru/react-responsive-iframe-viewer/blob/main/src/App.tsx)\n\n## Getting started\n\n\n### Install\nGrab the package from npm:\n\n```sh\nnpm install react-responsive-iframe-viewer\n```\n\n### Setup styles\n\n#### With TailwindCSS\nIf you use TailwindCSS, you need to mark this package as content:\n\n**tailwind.config.js**\n\n```js\nmodule.exports = {\n  content: [\n+   'node_modules/react-responsive-iframe-viewer/**/*.{js,ts,jsx,tsx,html}',\n    ...\n  ]\n}\n```\n\nDark mode is supported out of the box for TailwindCSS.\n\n#### Without TailwindCSS\nIf you don't use TailwindCSS, you can import the styles directly:\n\n```tsx\nimport 'react-responsive-iframe-viewer/dist/style.css'\n```\n\n## Usage\n\n```tsx\nimport { ResponsiveIframeViewer, ViewportSize } from 'react-responsive-iframe-viewer';\n\n\u003cResponsiveIframeViewer\n  src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"\n  title=\"Rick Astley - Never Gonna Give You Up\"\n  size={ViewportSize.mobile}\n/\u003e\n```\n\n## Options \u0026 Props\n`src` - The URL of the iframe content\u003cbr /\u003e\n`title` - The title of the iframe content\u003cbr /\u003e\n`size` - The size of the iframe container\u003cbr /\u003e\n`minWidth` - The minimum width to resize down to (**default: 200**)\u003cbr /\u003e\n`minHeight` - The minimum height to resize down to (**default: 200**)\u003cbr /\u003e\n`showControls` - Whether to show device controls or not (**default: true**)\u003cbr /\u003e\n`enabledControls` - An array of controls to enable (**default: [ViewportSize.mobile, ViewportSize.tablet, ViewportSize.desktop, ViewportSize.fluid]**)\u003cbr /\u003e\n`allowResizingY` - Whether to allow resizing the iframe container vertically (**default: false**)\u003cbr /\u003e\n`allowResizingX` - Whether to allow resizing the iframe container horizontally (**default: false**)\u003cbr /\u003e\n`fluidX` - Forces the width to 100% regardless of other settings (**default: false**)\u003cbr /\u003e\n`fluidY` - Forces the height to 100% regardless of other settings (**default: false**)\u003cbr /\u003e\n`onIframeLoad` - Event handler called when the iframe content has finished loading\u003cbr /\u003e\n\n\n### Custom sizes\n\nYou can provide a custom width/height for the iframe container:\n- `width` - The width of the iframe container\n- `height` - The height of the iframe container\n\nThe `size` prop will be ignored if `width` and `height` are provided.\n\n```tsx\n\u003cResponsiveIframeViewer\n  src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"\n  title=\"Rick Astley - Never Gonna Give You Up\"\n  width={320}\n  height={568}\n/\u003e\n```\n\n## Custom controls\n\nIt is possible to only show a subset of the available viewport toggles by passing in a list of enabled controls:\n\n```tsx\nimport { ResponsiveIframeViewer, ViewportSize } from \"../lib/main\";\n\n\u003cResponsiveIframeViewer\n  src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"\n  title=\"Rick Astley - Never Gonna Give You Up\"\n  size={ViewportSize.mobile}\n+  enabledControls={[ViewportSize.mobile, ViewportSize.fluid]}\n  allowResizingX\n/\u003e\n```\n\n## Supported sizes\n\n```tsx\nexport const VIEWPORT_SIZES = {\n  miniMobile: {\n    width: 320,\n    height: 480,\n  },\n  mobile: {\n    width: 375,\n    height: 667,\n  },\n  tablet: {\n    width: 768,\n    height: 1024,\n  },\n  desktop: {\n    width: 1024,\n    height: 768,\n  },\n  fluid: {\n    width: \"100%\",\n    height: \"100%\",\n  },\n\n  // Tailwind Viewports\n  sm: {\n    width: 640,\n    height: 1136,\n  },\n\n  md: {\n    width: 768,\n    height: 1024,\n  },\n\n  lg: {\n    width: 1024,\n    height: 768,\n  },\n\n  xl: {\n    width: 1280,\n    height: 720,\n  },\n\n  \"2xl\": {\n    width: 1536,\n    height: 864,\n  },\n\n  \"3xl\": {\n    width: 1920,\n    height: 1080,\n  },\n};\n```\n\n![Screenshot showing a nice demo with a shadow](https://github.com/danmindru/react-responsive-iframe-viewer/assets/1515742/aa130a18-9997-4dfd-a607-1e3c65c4840c)\n\n-----------------\n\n\u003ca href=\"https://apihustle.com\" target=\"_blank\"\u003e\n  \u003cimg height=\"60px\" src=\"https://user-images.githubusercontent.com/1515742/215217833-c07183d2-f688-4d1c-86ea-329f3b28f81c.svg\" alt=\"Apihustle Logo\" /\u003e\n\u003c/a\u003e\n\n-----------------\n\nSave 10s of hours of work by using Shipixen to generate a customized codebases with your branding, pages and blog \u003cbr/\u003e\n― then deploy it to Vercel with 1 click.\n\n| | |\n| :- | :- |\n| \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg height=\"60px\" src=\"https://user-images.githubusercontent.com/1515742/281071510-d5c0095d-d336-4857-ad80-d18cf65f4acb.png\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e \u003cbr/\u003e \u003cb\u003eShipixen\u003c/b\u003e \u003cbr/\u003e Create a blog \u0026 landing page in minutes with \u003cb\u003eShipixen\u003c/b\u003e. \u003cbr/\u003e Try the app on \u003ca href=\"https://shipixen.com\"\u003eshipixen.com\u003c/a\u003e. | \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg width=\"300px\" src=\"https://user-images.githubusercontent.com/1515742/281077548-57b24773-3c2a-4e89-b088-cc3945d7037b.png\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e |\n\n-----------------\n\nApihustle is a collection of tools to test, improve and get to know your API inside and out. \u003cbr/\u003e\n[apihustle.com](https://apihustle.com) \u003cbr/\u003e\n\n|    |    |    |    |\n| :- | :- | :- | :- |\n| \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/3af97560-d774-4149-96c5-65d3cc530a5a\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e | **Shipixen** | Create a personalized blog \u0026 landing page in minutes | [shipixen.com](https://shipixen.com) |\n| \u003ca href=\"https://pageui.dev\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/953cc5ab-bbf4-4a19-9b16-c74d218b63b4\" alt=\"Page UI Logo\" /\u003e\u003c/a\u003e | **Page UI** | Landing page UI components for React \u0026 Next.js | [pageui.dev](https://pageui.dev) |\n| \u003ca href=\"https://clobbr.app\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/50c11d46-a025-40fd-b154-0a5984556f6e\" alt=\"Clobbr Logo\" /\u003e\u003c/a\u003e | **Clobbr** | Load test your API endpoints. | [clobbr.app](https://clobbr.app) |\n| \u003ca href=\"https://crontap.com\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/fe1aac71-b663-4f8e-a225-0c47b2eee14d\" alt=\"Crontap Logo\" /\u003e\u003c/a\u003e | **Crontap** | Schedule API calls using cron syntax. | [crontap.com](https://crontap.com) |\n| \u003ca href=\"https://tool.crontap.com\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/713ff923-b03c-43ec-9cfd-75e542d0f5c4\" alt=\"CronTool Logo\" /\u003e\u003c/a\u003e | **CronTool** | Debug multiple cron expressions on a calendar. | [tool.crontap.com](https://tool.crontap.com)  |\n\n-----------------\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanmindru%2Freact-responsive-iframe-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanmindru%2Freact-responsive-iframe-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanmindru%2Freact-responsive-iframe-viewer/lists"}