Skip to Content
FrontendBundlesCRUDModalsQuick Add

Quick Add

QuickAdd opens a modal dialog with the entity’s Add form, allowing users to create a new entity without navigating away from the current listing or detail page.


Import

import { QuickAdd } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/QuickAdd";

Usage

import { QuickAdd } from "..."; function ListingActions() { const [open, setOpen] = useState(false); return ( <> <Button onClick={() => setOpen(true)}>Add New</Button> <QuickAdd open={open} onOpenChange={setOpen} entityConfig={entityConfig} formFields={entityFormFields} schema={entitySchema} onSuccess={() => { setOpen(false); refetchListing(); }} /> </> ); }

Props

PropTypeDescription
openbooleanModal open state
onOpenChange(open: boolean) => voidOpen state handler
entityConfigEntityConfigEntity configuration
formFieldsFieldConfig[]Fields to render
schemaZodSchemaValidation schema
onSuccess(entity: Entity) => voidCalled after successful creation
defaultValuesPartial<Entity>Pre-fill field values

QuickAdd uses the same RenderFormFields and Zod validation as the full Add Entity page — all field types and validations behave identically.


Last updated on