Skip to main content
Version: 3.xx.xx
Swizzle Ready

Create

<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.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import {
Create,
FormControl,
FormErrorMessage,
FormLabel,
Input,
Select,
} from "@pankod/refine-chakra-ui";
import { useSelect } from "@pankod/refine-core";
import { useForm } from "@pankod/refine-react-hook-form";

const PostCreate: React.FC = () => {
const {
refineCore: { formLoading },
saveButtonProps,
register,
formState: { errors },
} = useForm<IPost>();

const { options } = useSelect({
resource: "categories",
});

return (
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
<FormControl mb="3" isInvalid={!!errors?.title}>
<FormLabel>Title</FormLabel>
<Input
id="title"
type="text"
{...register("title", { required: "Title is required" })}
/>
<FormErrorMessage>{`${errors.title?.message}`}</FormErrorMessage>
</FormControl>
<FormControl mb="3" isInvalid={!!errors?.status}>
<FormLabel>Status</FormLabel>
<Select
id="content"
placeholder="Select Post Status"
{...register("status", {
required: "Status is required",
})}
>
<option>published</option>
<option>draft</option>
<option>rejected</option>
</Select>
<FormErrorMessage>{`${errors.status?.message}`}</FormErrorMessage>
</FormControl>
<FormControl mb="3" isInvalid={!!errors?.categoryId}>
<FormLabel>Category</FormLabel>
<Select
id="categoryId"
placeholder="Select Category"
{...register("categoryId", {
required: "Category is required",
})}
>
{options?.map((option) => (
<option value={option.value} key={option.value}>
{option.label}
</option>
))}
</Select>
<FormErrorMessage>{`${errors.categoryId?.message}`}</FormErrorMessage>
</FormControl>
</Create>
);
};
Swizzle

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".

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create, Heading } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create title={<Heading size="lg">Custom Title</Heading>}>
<p>Rest of your page here</p>
</Create>
);
};

saveButtonProps

<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.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create saveButtonProps={{ colorScheme: "red" }}>
<p>Rest of your page here</p>
</Create>
);
};

resource

The <Create> component reads the resource information from the route by default. This default behavior will not work on custom pages. If you want to use the <Create> component in a custom page, you can use the resource prop.

Refer to the custom pages documentation for detailed usage.

localhost:3000/custom
Live previews only work with the latest documentation.
import { Refine } from "@pankod/refine-core";
import dataProvider from "@pankod/refine-simple-rest";
import routerProvider from "@pankod/refine-react-router-v6";
import { Layout, Create } from "@pankod/refine-chakra-ui";

const CustomPage: React.FC = () => {
return (
<Create resource="categories">
<p>Rest of your page here</p>
</Create>
);
};

const App: React.FC = () => {
return (
<Refine
routerProvider={{
...routerProvider,
routes: [
{
element: <CustomPage />,
path: "/custom",
},
],
}}
Layout={Layout}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
resources={[{ name: "posts" }]}
/>
);
};

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.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create } from "@pankod/refine-chakra-ui";
import { IconMoodSmile } from "@tabler/icons";

const PostCreate: React.FC = () => {
return (
<Create goBack={IconMoodSmile}>
<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.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create isLoading={true}>
<p>Rest of your page here</p>
</Create>
);
};

To customize or disable the breadcrumb, you can use the breadcrumb property. By default it uses the Breadcrumb component from @pankod/refine-chakra-ui package.

Refer to the Breadcrumb documentation for detailed usage.

TIP

This feature can be managed globally via the <Refine> component's options

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create, Breadcrumb, Box } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create
breadcrumb={
<Box borderColor="blue" borderStyle="dashed" borderWidth="2px">
<Breadcrumb />
</Box>
}
>
<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 @pankod/refine-chakra-ui wrapper element is <Card>s and wrapperProps can get every attribute that <Box> can get.

Refer to the Box documentation from Chakra UI for detailed usage.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create
wrapperProps={{
borderColor: "blue",
borderStyle: "dashed",
borderWidth: "2px",
}}
>
<p>Rest of your page here</p>
</Create>
);
};

headerProps

If you want to customize the header of the <Create/> component, you can use the headerProps property.

Refer to the Box documentation from Chakra UI for detailed usage.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create
headerProps={{
borderColor: "blue",
borderStyle: "dashed",
borderWidth: "2px",
}}
>
<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 Chakra UI for detailed usage.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create
contentProps={{
borderColor: "blue",
borderStyle: "dashed",
borderWidth: "2px",
}}
>
<p>Rest of your page here</p>
</Create>
);
};

headerButtons

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.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create, Button, Box } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create
headerButtons={({ defaultButtons }) => (
<Box borderColor="blue" borderStyle="dashed" borderWidth="2px" p="2">
{defaultButtons}
<Button colorScheme="red" variant="solid">
Custom Button
</Button>
</Box>
)}
>
<p>Rest of your page here</p>
</Create>
);
};

headerButtonProps

You can customize the wrapper element of the buttons at the header by using the headerButtonProps property.

Refer to the Box documentation from Chakra UI for detailed usage.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create, Button } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create
headerButtonProps={{
borderColor: "blue",
borderStyle: "dashed",
borderWidth: "2px",
}}
headerButtons={<Button type="primary">Custom Button</Button>}
>
<p>Rest of your page here</p>
</Create>
);
};

footerButtons

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.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create, Button, HStack } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create
footerButtons={({ defaultButtons }) => (
<HStack borderColor="blue" borderStyle="dashed" borderWidth="2px" p="2">
{defaultButtons}
<Button colorScheme="red" variant="solid">
Custom Button
</Button>
</HStack>
)}
>
<p>Rest of your page here</p>
</Create>
);
};

footerButtonProps

You can customize the wrapper element of the buttons at the footer by using the footerButtonProps property.

Refer to the Box documentation from Chakra UI for detailed usage.

localhost:3000/posts/create
Live previews only work with the latest documentation.
import { Create } from "@pankod/refine-chakra-ui";

const PostCreate: React.FC = () => {
return (
<Create
footerButtonProps={{
float: "right",
borderColor: "blue",
borderStyle: "dashed",
borderWidth: "2px",
p: "2",
}}
>
<p>Rest of your page here</p>
</Create>
);
};

API Reference

Props