SVAR React Export Popup

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
• Paper setup, Layout modes, Presets
• Excel column selection with drag-to-reorder
• Light and dark themes
• Full TypeScript support

🛠️ 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.

💬 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.