Present the Eazip tray

<EazipTray /> turns the current task into a complete download interface. It stays hidden until a task starts and requires no stylesheet import.

Add it once

Render one tray near the application root:

export default function App() {
  return (
    <>
      <Routes />
      <EazipTray />
    </>
  );
}

Its default portal target is document.body, so its JSX position does not control where it appears visually.

Choose the presentation

<EazipTray
  placement="bar"
  theme="auto"
  accent="#6366f1"
  autoHideMs={20_000}
/>

theme="auto" follows the system color scheme. accent changes progress and action highlights while the neutral palette continues to follow the theme.

Embed the tray inside a panel

Changing container moves the portal node. To make fixed positioning relative to that node, the container must also establish a containing block:

import { useState } from 'react';
import { EazipTray } from '@eazip/react';

function EmbeddedTray() {
  const [panel, setPanel] = useState<HTMLDivElement | null>(null);

  return (
    <div
      ref={setPanel}
      style={{
        position: 'relative',
        contain: 'layout paint',
      }}
    >
      <PanelContent />
      <EazipTray container={panel} />
    </div>
  );
}

Understand auto-hide

The tray auto-hides only after a completed download has started. Hover, focus, or touch pauses the timer. Partial results remain visible because they contain information the reader should acknowledge. Set autoHideMs={0} to disable the timer.

Accessibility behavior

• State changes use a polite live region without stealing focus.
• Expand and collapse controls expose their state to assistive technology.
• Escape collapses an expanded tray.
• Animation respects prefers-reduced-motion.

See the React Reference for every tray prop and Localization for message overrides.