Skip to main content

placement

Selects the wrapper the editor renders into. The items, values, validation, and save flow are the same in every mode.

Usage​

placement?: "inline" | "sidebar" | "modal" | "fullscreen";
  • "inline" - (default) renders in place, in the page flow.
  • "sidebar" - slides in a side panel; an outside click emits onAction with item.id === "close".
  • "modal" - opens a centered dialog over a backdrop.
  • "fullscreen" - pins a panel over the whole viewport.

Any unrecognized value behaves like "inline". No mode closes itself; the parent removes the editor in response to onAction or onSave.

Example​

import { useState } from "react";
import { Editor } from "@svar-ui/react-editor";

function Demo() {
  const [open, setOpen] = useState(true);

  return (
    open && (
      <Editor
        items={items}
        values={values}
        placement="modal"
        onAction={({ item }) => {
          if (item.id === "cancel" || item.id === "close") setOpen(false);
        }}
      />
    )
  );
}