DocsDocsHire usHire us (opens in a new tab)
GitHubGitHub (opens in a new tab) (opens in a new tab)
  • Introduction
  • Getting Started
    • Component Configuration
    • Root Configuration
    • Multi-column Layouts
    • Categories
    • Dynamic Props
    • Dynamic Fields
    • External Data Sources
    • Server Components
    • Data Migration
    • Viewports
    • Custom Fields
    • Custom Interfaces
    • Theming
    • Plugins
    • Components
      • <AutoField>
      • <Drawer>
      • <Drawer.Item>
      • <DropZone>
      • <FieldLabel>
      • <Puck>
      • <Puck.Components>
      • <Puck.Fields>
      • <Puck.Outline>
      • <Puck.Preview>
      • <Render>
    • Configuration
      • Config
      • ComponentConfig
    • Fields
      • Base
      • Array
      • Custom
      • External
      • Number
      • Object
      • Radio
      • Select
      • Text
      • Textarea
    • Functions
      • migrate
      • resolveAllData
      • transformProps
      • usePuck
    • Overrides
      • componentItem
      • components
      • fieldLabel
      • fieldTypes
      • fields
      • headerActions
      • header
      • iframe
      • outline
      • preview
      • puck
    • Actions
    • App State
    • Data
    • Plugin

On This Page

  • Props
  • document
  • children
Question? Give us feedback → (opens in a new tab)Edit this page
Docs
API Reference
Overrides
iframe

iframe

Override the root of the iframe.

const overrides = {
  iframe: ({ children, document }) => {
    useEffect(() => {
      if (document) {
        document.body.setAttribute("style", "background: hotpink;");
      }
    }, [document]);
 
    return <>{children}</>;
  },
};

Props

PropExampleType
document{}Document
children<div />ReactNode

document

The document of the iframe window.

children

The default node for the iframe.

headeroutline

MIT © 2024 Measured Corporation Ltd.