Here is a new article focused specifically on presenting and using the IFramePanel control in a modern React.FC approach:

Displaying an IFramePanel in SPFx Using React Functional Components

Introduction

The IFramePanel control from the PnP SPFx React Controls library provides a simple and elegant way to display external content inside a Fluent UI panel. It is especially useful when you need to embed external pages, dashboards, or applications inside your SharePoint solution without leaving the current context.

In this article, we will demonstrate how to properly implement and display the IFramePanel using a modern React Functional Component (React.FC) with hooks.

What is IFramePanel?

The IFramePanel is a reusable component that:

• Renders a Fluent UI panel
• Embeds an external URL using an <iframe>
• Provides built-in loading and panel behavior
• Integrates seamlessly with SPFx solutions

Full Working Example

Below is a complete implementation using React.FC:

import * as React from “react”;

import { useState } from “react”;

import { IFramePanel } from “@pnp/spfx-controls-react/lib/IFramePanel”;

import { PanelType } from “@fluentui/react/lib/Panel”;

const IFramePanelWp: React.FC = () => {

  const [iFrameUrl, setIFrameUrl] = useState<string>(“https://www.microsoft.com“);

  const [isOpen, setIsOpen] = useState<boolean>(false);

  const onDismiss = () => {

    setIsOpen(false);

  };

  const onIframeLoaded = () => {

    console.log(“IFrame content loaded successfully”);

  };

  return (

    <div>

      <button onClick={() => setIsOpen(true)}>

        Open IFrame Panel

      </button>

      <IFramePanel

        url={iFrameUrl}

        type={PanelType.medium}

        headerText=”External Content”

        closeButtonAriaLabel=”Close”

        isOpen={isOpen}

        onDismiss={onDismiss}

        iframeOnLoad={onIframeLoaded}

      />

    </div>

  );

};

export default IFramePanelWp;

How It Works

1. Managing the Panel State

We control whether the panel is visible using the useState hook:

const [isOpen, setIsOpen] = useState<boolean>(false);

• false means the panel is hidden
• true means the panel is displayed

2. Opening the IFramePanel

A simple button is used to trigger the panel:

<button onClick={() => setIsOpen(true)}>

  Open IFrame Panel

</button>

“

When clicked, it updates the state and opens the panel.

3. Closing the Panel

The onDismiss handler is called when the user closes the panel:

const onDismiss = () => {

  setIsOpen(false);

};

This ensures the panel state is updated correctly.

4. Loading External Content

The url property defines what will be displayed:

const [iFrameUrl, setIFrameUrl] = useState<string>(“https://www.microsoft.com“);

You can dynamically change this value to load different content.

5. Detecting IFrame Load

The iframeOnLoad event allows you to run logic after the content loads:

const onIframeLoaded = () => {

  console.log(“IFrame content loaded successfully”);

};

This can be useful for logging, analytics, or triggering additional UI updates.

Key Properties of IFramePanel

Why Use React.FC with Hooks?

Modernizing your SPFx components provides several benefits:

• Eliminates the need for this and class-based syntax
• Simplifies state management with useState
• Improves readability and maintainability
• Aligns with current React best practices

Practical Use Cases

The IFramePanel is useful in scenarios such as:

• Embedding Power BI reports
• Displaying external dashboards
• Integrating third-party tools
• Showing internal web applications
• Previewing documents or pages

Conclusion

The IFramePanel control offers a powerful and user-friendly way to embed external content within SharePoint Framework solutions. By combining it with React Functional Components, you get a clean, modern, and maintainable implementation.