react-iframe

A standalone React library to manage multi-instance IFrame workspaces with persistence, memory management, and cross-window communication.

Features

• Persistent DOM: IFrames are cached (hidden), not unmounted.
• Hibernation: Automatically unloads inactive tabs after a timeout to save memory.
• LRU Management: Automatically closes least-recently-used tabs when maximum capacity is reached.
• Persistence: Session recovery via LocalStorage.
• Bridge Support: Easy communication between parent and IFrame.

Components

TabProvider

Wrap your application with this provider.

import { TabProvider } from '@natykufsky/react-iframe';

function App() {
  return (
    <TabProvider persist={true} maxTabs={10}>
      <Dashboard />
    </TabProvider>
  );
}

TabList

The tab navigation bar.

import { TabList } from '@natykufsky/react-iframe';
import '@natykufsky/react-iframe/styles.css';

// ... inside a component
<TabList />

TabViews

The container for all iframes.

import { TabViews } from '@natykufsky/react-iframe';

// ... inside a component
<TabViews hibernationMinutes={30} />

Hook: useTabs

const { addTab, removeTab, focusTab, tabs, activeTabId } = useTabs();

const openPage = () => {
  addTab({
    id: 'user-profile',
    title: 'User Profile',
    url: '/admin/users/1/edit',
    icon: 'user'
  });
};

IFrame Bridge

Include the bridge script in your child pages (e.g., in a Laravel layout):

<script src="/path/to/ReFrameBridge.js"></script>
<script>
  // Close the current tab from inside the iframe
  reFrame.close();
  
  // Set tab title
  reFrame.setTitle('Editing User: Naty');
</script>

In the React parent, use the useIFrameBridge hook:

useIFrameBridge(); // Listens for postMessage events