react-iframe

library1.8.5jsnpmunverified

react-iframe is a React component designed to simplify the integration of `<iframe>` elements into React applications. It acts as a convenient, TypeScript-supported wrapper around the native HTML `<iframe>` tag, abstracting common setup and attribute handling. The current stable version is 1.8.5. While it does not follow a strict release cadence, the project appears actively maintained with recent updates and comprehensive TypeScript support, making it well-suited for modern React development. Its key differentiator is providing a prop-driven interface for `iframe` attributes, including graceful handling of HTML5 deprecated attributes (like `frameBorder` and `allowFullScreen`), and offering explicit, convenient props for `sandbox` and `allow` attributes, which are crucial for security and feature control in contemporary web development and can be more cumbersome to manage directly with a plain `<iframe>` element.

web-framework

github ↗package ↗

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Iframe is exported as the default export of the package.

import Iframe from 'react-iframe'

For CommonJS environments, the default export must be accessed via `.default`.

const Iframe = require('react-iframe').default

The type definition for the component's props can be imported for TypeScript usage.

import type { IframeProps } from 'react-iframe'

Demonstrates basic integration of the `Iframe` component, including essential layout props, explicit `frameBorder` setting, and examples of crucial `allow` and `sandbox` attributes for modern iframe security and feature control.

import React from 'react'; import Iframe from 'react-iframe'; function MyPage() { return ( <div> <h1>My Embedded Content</h1> <Iframe url="https://www.sdrive.app/embed/1ptBQD" width="640px" height="320px" id="my-sdrive-iframe" className="my-iframe-class" display="block" position="relative" frameBorder={0} allow="fullscreen; camera; microphone; geolocation" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" styles={{ border: '1px solid #ccc', borderRadius: '8px' }} /> <p>Content below the iframe.</p> </div> ); } export default MyPage;

Debug

Known footguns

deprecatedSeveral HTML iframe attributes like `frameBorder`, `scrolling`, and `allowFullScreen` are deprecated in HTML5. While `react-iframe` supports them for compatibility, it's recommended to achieve equivalent styling and functionality using CSS and the `allow` and `sandbox` attributes.

gotchaThe `sandbox` and `allow` attributes are critical for iframe security and permissions. Improper configuration, especially omitting `sandbox` or using overly permissive values, can expose your application to Cross-Site Scripting (XSS) or other vulnerabilities from the embedded content. Conversely, overly restrictive settings can prevent necessary functionality.

gotchaThe `styles` prop in `react-iframe` intentionally overrides any conflicting style-related props such as `width`, `height`, `position`, or `overflow`. This behavior can lead to unexpected sizing or positioning if not understood.

gotchaIframes are subject to browser security policies like the Same-Origin Policy, `X-Frame-Options` HTTP headers, and Content Security Policy (CSP). External content might refuse to load or interact if these policies are not met, often manifesting as blank iframes or console errors.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

14 hits · last 30 days

gptbot

ahrefsbot

script

bingbot

Resources

githubhttps://github.com/svenanders/react-iframe ↗

packagehttps://www.npmjs.com/package/react-iframe ↗