const { default: simpleRest } = RefineSimpleRest;
setRefineProps({
dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
notificationProvider: RefineMantine.notificationProvider,
Layout: RefineMantine.Layout,
Sider: () => null,
});
const Wrapper = ({ children }) => {
return (
<MantineCore.MantineProvider
theme={RefineMantine.LightTheme}
withNormalizeCSS
withGlobalStyles
>
<MantineCore.Global
styles={{ body: { WebkitFontSmoothing: "auto" } }}
/>
<MantineNotifications.NotificationsProvider position="top-right">
{children}
</MantineNotifications.NotificationsProvider>
</MantineCore.MantineProvider>
);
};
interface ICategory {
id: number;
title: string;
}
interface IPost {
id: number;
title: string;
content: string;
status: "published" | "draft" | "rejected";
category: { id: number };
}
<Create> provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.
We'll show what <Create> does using properties with examples.
import { Create, useForm, useSelect } from "@refinedev/mantine";
import { Select, TextInput } from "@mantine/core";
const PostCreate: React.FC = () => {
const { saveButtonProps, getInputProps } = useForm<IPost>({
initialValues: {
title: "",
status: "",
category: {
id: "",
},
},
validate: {
title: (value) => (value.length < 2 ? "Too short title" : null),
status: (value) =>
value.length <= 0 ? "Status is required" : null,
category: {
id: (value) =>
value.length <= 0 ? "Category is required" : null,
},
},
});
const { selectProps } = useSelect<ICategory>({
resource: "categories",
});
return (
<Create saveButtonProps={saveButtonProps}>
<form>
<TextInput
mt={8}
label="Title"
placeholder="Title"
{...getInputProps("title")}
/>
<Select
mt={8}
label="Status"
placeholder="Pick one"
{...getInputProps("status")}
data={[
{ label: "Published", value: "published" },
{ label: "Draft", value: "draft" },
{ label: "Rejected", value: "rejected" },
]}
/>
<Select
mt={8}
label="Category"
placeholder="Pick one"
{...getInputProps("category.id")}
{...selectProps}
/>
</form>
</Create>
);
};
You can swizzle this component to customize it with the refine CLI
Properties
title
It allows adding title inside the <Create> component. if you don't pass title props it uses "Create" prefix and singular resource name by default. For example, for the /posts/create resource, it will be "Create post".
import { Create } from "@refinedev/mantine";
import { Title } from "@mantine/core";
const PostCreate: React.FC = () => {
return (
<Create title={<Title order={3}>Custom Title</Title>}>
<p>Rest of your page here</p>
</Create>
);
};
<Create> component has a default button that submits the form. If you want to customize this button you can use the saveButtonProps property like the code below.
Refer to the <SaveButton> documentation for detailed usage. →
import { Create } from "@refinedev/mantine";
const PostCreate: React.FC = () => {
return (
<Create saveButtonProps={{ size: "xs" }}>
<p>Rest of your page here</p>
</Create>
);
};
resource
The <Create> component reads the resource information from the route by default. If you want to use a custom resource for the <Create> component, you can use the resource prop.
import { Create } from "@refinedev/mantine";
const CustomPage: React.FC = () => {
return (
<Create resource="categories">
<p>Rest of your page here</p>
</Create>
);
};
goBack
To customize the back button or to disable it, you can use the goBack property. You can pass false or null to hide the back button.
import { Create } from "@refinedev/mantine";
const PostCreate: React.FC = () => {
return (
<Create goBack="😊">
<p>Rest of your page here 2</p>
</Create>
);
};
isLoading
To toggle the loading state of the <Create/> component, you can use the isLoading property.
import { Create } from "@refinedev/mantine";
const PostCreate: React.FC = () => {
return (
<Create isLoading={true}>
<p>Rest of your page here</p>
</Create>
);
};
breadcrumb
To customize or disable the breadcrumb, you can use the breadcrumb property. By default it uses the Breadcrumb component from @refinedev/mantine package.
Refer to the Breadcrumb documentation for detailed usage. →
This feature can be managed globally via the <Refine> component's options
import { Create, Breadcrumb } from "@refinedev/mantine";
const PostCreate: React.FC = () => {
return (
<Create
breadcrumb={
<div
style={{
padding: "3px 6px",
border: "2px dashed cornflowerblue",
}}
>
<Breadcrumb />
</div>
}
>
<p>Rest of your page here</p>
</Create>
);
};
wrapperProps
If you want to customize the wrapper of the <Create/> component, you can use the wrapperProps property. For @refinedev/mantine wrapper element is <Card>s and wrapperProps can get every attribute that <Card> can get.
Refer to the Card documentation from Mantine for detailed usage. →
import { Create } from "@refinedev/mantine";
const PostCreate: React.FC = () => {
return (
<Create
wrapperProps={{
style: {
border: "2px dashed cornflowerblue",
padding: "16px",
},
}}
>
<p>Rest of your page here</p>
</Create>
);
};
If you want to customize the header of the <Create/> component, you can use the headerProps property.
Refer to the Group documentation from Mantine for detailed usage. →
import { Create } from "@refinedev/mantine";
const PostCreate: React.FC = () => {
return (
<Create
headerProps={{
style: {
border: "2px dashed cornflowerblue",
padding: "16px",
},
}}
>
<p>Rest of your page here</p>
</Create>
);
};
contentProps
If you want to customize the content of the <Create/> component, you can use the contentProps property.
Refer to the Box documentation from Mantine for detailed usage. →
import { Create } from "@refinedev/mantine";
const PostCreate: React.FC = () => {
return (
<Create
contentProps={{
style: {
border: "2px dashed cornflowerblue",
padding: "16px",
},
}}
>
<p>Rest of your page here</p>
</Create>
);
};
You can customize the buttons at the header by using the headerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons }) => React.ReactNode which you can use to keep the existing buttons and add your own.
import { Create } from "@refinedev/mantine";
import { Button } from "@mantine/core";
const PostCreate: React.FC = () => {
return (
<Create
headerButtons={({ defaultButtons }) => (
<>
{defaultButtons}
<Button type="primary">Custom Button</Button>
</>
)}
>
<p>Rest of your page here</p>
</Create>
);
};
You can customize the wrapper element of the buttons at the header by using the headerButtonProps property.
Refer to the Group documentation from Mantine for detailed usage. →
import { Create } from "@refinedev/mantine";
import { Button } from "@mantine/core";
const PostCreate: React.FC = () => {
return (
<Create
headerButtonProps={{
style: {
border: "2px dashed cornflowerblue",
padding: "16px",
},
}}
headerButtons={<Button type="primary">Custom Button</Button>}
>
<p>Rest of your page here</p>
</Create>
);
};
You can customize the buttons at the footer by using the footerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons }) => React.ReactNode which you can use to keep the existing buttons and add your own.
import { Create } from "@refinedev/mantine";
import { Button } from "@mantine/core";
const PostCreate: React.FC = () => {
return (
<Create
footerButtons={({ defaultButtons }) => (
<>
{defaultButtons}
<Button variant="gradient">Custom Button</Button>
</>
)}
>
<p>Rest of your page here</p>
</Create>
);
};
You can customize the wrapper element of the buttons at the footer by using the footerButtonProps property.
Refer to the Group documentation from Mantine for detailed usage. →
import { Create } from "@refinedev/mantine";
const PostCreate: React.FC = () => {
return (
<Create
footerButtonProps={{
style: {
float: "right",
marginRight: 24,
border: "2px dashed cornflowerblue",
padding: "16px",
},
}}
>
<p>Rest of your page here</p>
</Create>
);
};
API Reference
Props
http://localhost:3000