Add Iframe Component support

packages/fastui/src/components/Iframe.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react'
+
+import { ClassName } from '../hooks/className'
+
+export interface IframeProps {
+  type: 'Iframe'
+  src: string
+  width?: string | number
+  height?: string | number
+  title?: string
+  className?: ClassName
+}
+
+export const IframeComp: FC<IframeProps> = (props) => {
+  const { src, width, height, title } = props
+  return <iframe src={src} width={width} height={height} title={title} />
+}

packages/fastui/src/components/index.tsx

@@ -38,6 +38,7 @@ import {
 } from './display'
 import { JsonComp, JsonProps } from './Json'
 import { ServerLoadComp, ServerLoadProps } from './ServerLoad'
+import { IframeComp, IframeProps } from './Iframe'
 
 export type {
   TextProps,
@@ -63,6 +64,7 @@ export type {
   DisplayPrimitiveProps,
   JsonProps,
   ServerLoadProps,
+  IframeProps,
 }
 
 // TODO some better way to export components
@@ -91,6 +93,7 @@ export type FastProps =
   | AllDisplayProps
   | JsonProps
   | ServerLoadProps
+  | IframeProps
 
 export type FastClassNameProps = Exclude<FastProps, TextProps | AllDisplayProps | ServerLoadProps | PageTitleProps>
 
@@ -169,6 +172,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <JsonComp {...props} />
       case 'ServerLoad':
         return <ServerLoadComp {...props} />
+      case 'Iframe':
+        return <IframeComp {...props} />
       default:
         unreachable('Unexpected component type', type, props)
         return <DisplayError title="Invalid Server Response" description={`Unknown component type: "${type}"`} />

python/demo/components_list.py

@@ -160,6 +160,14 @@ class Delivery(BaseModel):
             ],
             class_name='border-top mt-3 pt-1',
         ),
+        c.Div(
+            components=[
+                c.Heading(text='Iframe', level=2),
+                c.Markdown(text='`Iframe` can be used to embed external content.'),
+                c.Iframe(src='https://pydantic.dev', width='100%', height=400),
+            ],
+            class_name='border-top mt-3 pt-1',
+        ),
         title='Components',
     )
 

python/demo/main.py

@@ -30,6 +30,7 @@ def api_index() -> list[AnyComponent]:
 * `Navbar` — see the top of this page
 * `Modal` — static example [here](/components#button-and-modal), dynamic content example [here](/components#dynamic-modal)
 * `ServerLoad` — see [dynamic modal example](/components#dynamic-modal) and [SSE example](/components#server-load-sse)
+* `Iframe` - example [here](/components#iframe)
 * `Table` — See [cities table](/table/cities) and [users table](/table/users)
 * `Pagination` — See the bottom of the [cities table](/table/cities)
 * `ModelForm` — See [forms](/forms/login)

python/fastui/components/__init__.py

@@ -170,6 +170,14 @@ class ServerLoad(pydantic.BaseModel, extra='forbid'):
     type: typing.Literal['ServerLoad'] = 'ServerLoad'
 
 
+class Iframe(pydantic.BaseModel, extra='forbid'):
+    src: pydantic.HttpUrl
+    title: str | None = None
+    width: str | int | None = None
+    height: str | int | None = None
+    type: typing.Literal['Iframe'] = 'Iframe'
+
+
 AnyComponent = typing.Annotated[
     Text
     | Paragraph
@@ -191,6 +199,7 @@ class ServerLoad(pydantic.BaseModel, extra='forbid'):
     | Details
     | Form
     | ModelForm
+    | Iframe
     | FormField,
     pydantic.Field(discriminator='type'),
 ]