Template gallery dialog (lazy entry) · Browser (client only)

@openseat/editor/templates

The venue template gallery ("New layout from template") as its own entry point, for hosts that open it from their own UI (a dashboard's "New layout" button, say).

Kept out of the main entry so the gallery, its thumbnails and @openseat/core/templates never reach a host's main bundle: import this subpath lazily (React.lazy(() => import("@openseat/editor/templates") .then((m) => ({ default: m.TemplateGalleryDialog })))). LayoutEditor already opens the gallery itself; this is only for hosts that want it elsewhere.

The dialog edits the editor's store, so render it inside the editor's context: as a child of <EditorContext.Provider> (exported by the main entry), with the value of useEditorContext().

1 component
MIT

A separate, lazily loaded entry point of @openseat/editor: nothing extra to install, and apps that never import it never download it.

npm i @openseat/editor @openseat/core konva react react-dom

first npm release pending

Install commands show the public npm names. The first npm release is pending; the packages are free and MIT licensed.

depends on @openseat/core, @openseat/react, @openseat/renderer-konva, @openseat/theme-default, zustand · peers konva, react, react-dom

/

Import

import {
  TemplateGalleryDialog,
} from "@openseat/editor/templates";

Components1

component

TemplateGalleryDialog

function TemplateGalleryDialog(
  props: TemplateGalleryDialogProps,
): JSX.Element;

Props · TemplateGalleryDialogProps

See TemplateGalleryDialogProps.

@openseat/editor/src/react/templates/TemplateGalleryDialog.tsx

Re-exports1

interface

TemplateGalleryDialogProps

Re-exported from @openseat/editor: "New layout from template": the venue template gallery. Loaded with React.lazy, and it loads @openseat/core/templates and the generated thumbnails with dynamic imports, so neither is in the editor's main bundle.