Skip to main content

popupContainer

Description​

Defines a custom HTML element as the container for all popups and non-inline dropdowns

By default, popups are appended to the document body, but this is not always suitable. For example, when a SVAR application occupies only part of a page or is rendered inside a <dialog> element. In such cases, popupContainer allows you to target a more appropriate element.

Usage​

const ref = useRef(null);

<div ref={ref}>
    {/* your SVAR App */}
</div>

You can import the helper from @svar-ui/react-core.

Example​

The example below shows how to scope all popups to a wrapper <div> instead of the document body:

import { useRef, useEffect } from "react";
import { popupContainer } from "@svar-ui/react-core";
import { RichSelect } from "@svar-ui/react-core";

const options = [
  { id: 1, label: "Option 1" },
  { id: 2, label: "Option 2" },
  { id: 3, label: "Option 3" },
];

function App() {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const cleanup = popupContainer(ref.current);
    return () => cleanup?.destroy?.() ?? cleanup?.();
  }, []);

  return (
    <div ref={ref}>
      <RichSelect options={options} />
    </div>
  );
}

export default App;

Any dropdowns or popups opened by SVAR components inside the popupContainer element will be rendered within that element rather than on the document body.

Related articles: