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
| Prop | Type | Description |
|---|---|---|
open | boolean | Modal open state |
onOpenChange | (open: boolean) => void | Open state handler |
entityConfig | EntityConfig | Entity configuration |
formFields | FieldConfig[] | Fields to render |
schema | ZodSchema | Validation schema |
onSuccess | (entity: Entity) => void | Called after successful creation |
defaultValues | Partial<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.
Related
Last updated on