RouteFocusModal - Admin Components

The RouteFocusModal component renders a full-screen modal that covers the page behind it. The Medusa Admin uses it for forms that need a lot of space, such as the form that creates a region.

Code
import { RouteFocusModal } from "@medusajs/dashboard/components"

Route Modals#

RouteFocusModal is tied to a route, not to a trigger button. You render it as the root element of a UI route that is nested under the page it belongs to. When the user navigates to that route, the modal opens. When the user closes the modal, RouteFocusModal navigates back to the previous route.

So, to open the modal, link the user to the modal's route. For example, link to /brands/create from the brand list page.

Use RouteFocusModal for create forms and multi-step flows, and use the RouteDrawer for smaller edit forms.

Example#

Consider a UI route at src/admin/routes/brands/create/page.tsx that creates a brand:

src/admin/routes/brands/create/page.tsx
1import { Button, Heading, Input } from "@medusajs/ui"2import {3  RouteFocusModal,4  useRouteModal,5} from "@medusajs/dashboard/components"6import { useForm } from "react-hook-form"7
8const BrandCreate = () => {9  return (10    <RouteFocusModal>11      <CreateBrandForm />12    </RouteFocusModal>13  )14}15
16const CreateBrandForm = () => {17  const { handleSuccess } = useRouteModal()18  const form = useForm({19    defaultValues: {20      name: "",21    },22  })23
24  const handleSubmit = form.handleSubmit(async (data) => {25    const brand = await createBrand(data)26    handleSuccess(`../${brand.id}`)27  })28
29  return (30    <RouteFocusModal.Form form={form}>31      <form onSubmit={handleSubmit}>32        <RouteFocusModal.Header />33        <RouteFocusModal.Body>34          <Heading>Create Brand</Heading>35          <Input {...form.register("name")} />36        </RouteFocusModal.Body>37        <RouteFocusModal.Footer>38          <RouteFocusModal.Close asChild>39            <Button variant="secondary" size="small">40              Cancel41            </Button>42          </RouteFocusModal.Close>43          <Button type="submit" size="small">44            Create45          </Button>46        </RouteFocusModal.Footer>47      </form>48    </RouteFocusModal.Form>49  )50}51
52export default BrandCreate

Call the useRouteModal hook in a child of the RouteFocusModal, since the modal provides its context. The hook returns handleSuccess, which closes the modal after a successful submission. Refer to the Route Drawer documentation for the hook's returned values, including setCloseOnEscape that controls whether the Escape key closes the modal.

Props#

RouteFocusModal accepts the following props, in addition to its children:

Sub-components#

RouteFocusModal.Form Props#

Stacking Modals#

To open another modal above a RouteFocusModal, such as a table for the user to select items from, use the StackedFocusModal or the StackedDrawer components. Both are controlled with the useStackedModal hook.