Frame Component

The Frame component provides a robust solution for embedding external content like PDFs, webpages, and other resources with intelligent loading states and optimized performance.

Key Features

• Smart Loading: Built-in loading indicators

• Lazy Loading By Default: Optimized performance with configurable preloading

• Responsive Design: Full-width and height containment

Basic Usage

Embed external content with minimal configuration:

1
<Frame src="https://example.com/embedded-content" />

Preload Distance

Configure when the iframe should start loading before it enters the viewport:

1
<Frame
2
    src="https://example.com/content"
3
    data-preload-distance="200"
4
/>

The data-preload-distance attribute defines the distance in pixels from the viewport when preloading should begin.

Frame Component Props API

Best Practices

1. Performance Optimization

   • Use lazy loading for below-the-fold content
   • Set appropriate preload distances for critical content
   • Consider the impact on page load time

2. Security Considerations

   • Only embed content from trusted sources
   • Use appropriate sandbox attributes when needed
   • Consider content security policies

3. Accessibility

   • Provide title attributes for screen readers
   • Ensure embedded content is accessible
   • Consider fallback content when appropriate

Common Applications