SVAR React Export Popup

Website • Docs • Demos

SVAR React Export Popup is a customizable React dialog that collects export options from the user and emits a ready-to-send export request. It ships built-in tabs for PDF, PNG, and Excel (XLSX) output, page layout and margin controls, Excel column selection, theming, localization, and a flexible API for adding your own export formats.

The component helps you quickly add a polished "Export…" experience to React applications with minimal setup. Includes TypeScript support and is compatible with React 18+ and Next.js.

✨ Key Features

• Built-in PDF, PNG, and Excel (XLSX) export tabs
• Page size, orientation, and layout: single, poster, booklet
• Custom page dimensions and per-side margins
• PDF header and footer toggles
• Scale and fit-to-page controls
• Excel column selection with drag-to-reorder
• Estimated page-count hints for poster and booklet layouts
• Custom export tabs — settingless placeholders or rich tabs with their own settings UI
• Appearance presets: light, dark, print friendly, black & white
• Anchored or absolute popup positioning
• Localization with bundled languages
• Built-in light and dark themes
• TypeScript definitions included
• React 18+ compatible

🚀 PRO Edition

SVAR React Export Popup is available in open-source and PRO editions. The PRO build adds extra export options and a commercial license for production projects, without changing the component API.

Visit the pricing page for licensing details, feature comparison, and free trial.

Check out the live demo to see SVAR React Export Popup in action.

:hammer_and_wrench: How to Use

Anchor the popup to a trigger element, choose which tabs to show, and handle the emitted export request through onExport:

import { useRef, useState } from 'react';
import { ExportPopup } from '@svar-ui/react-export-popup';
import '@svar-ui/react-export-popup/all.css';

export default function App() {
  const anchor = useRef(null);
  const [open, setOpen] = useState(false);

  function handleExport(request) {
    // request describes the chosen format and options, e.g.
    // { format: 'pdf', skin: 'light', paper: { size: 'auto', landscape: false } }
    fetch('/api/export', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(request),
    });
    setOpen(false);
  }

  return (
    <>
      <button ref={anchor} onClick={() => setOpen(true)}>
        Export…
      </button>
      {open && (
        <ExportPopup
          title="Export"
          tabs={['pdf', 'png', 'xlsx']}
          parent={anchor.current}
          onExport={handleExport}
          onClose={() => setOpen(false)}
        />
      )}
    </>
  );
}

By default, the popup shows the pdf and png tabs. Add the built-in xlsx tab or your own custom tabs through the tabs prop to enable Excel export and additional formats.

For further instructions, follow the detailed quick start guide.

:speech_balloon: Need Help?

Post an issue or use our community forum.

⭐ Show Your Support

If SVAR React Export Popup helps your project, give it a star. It helps other developers discover this library and motivates us to keep improving.