const { default: simpleRest } = RefineSimpleRest;
setRefineProps({
dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
Layout: RefineChakra.Layout,
Sider: () => null,
});
const Wrapper = ({ children }) => {
return (
<ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
{children}
</ChakraUI.ChakraProvider>
);
};
const DummyListPage = () => (
<ChakraUI.VStack alignItems="flex-start">
<ChakraUI.Text>This page is empty.</ChakraUI.Text>
<CreateButton colorScheme="black" />
</ChakraUI.VStack>
);
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 } from "@refinedev/chakra-ui";
import {
FormControl,
FormErrorMessage,
FormLabel,
Input,
Select,
} from "@chakra-ui/react";
import { useSelect } from "@refinedev/core";
import { useForm } from "@refinedev/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>
);
};
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/chakra-ui";
import { Heading } from "@chakra-ui/react";
const PostCreate: React.FC = () => {
return (
<Create title={<Heading size="lg">Custom Title</Heading>}>
<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/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. If you want to use a custom resource for the <Create> component, you can use the resource prop.
import { Create } from "@refinedev/chakra-ui";
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/chakra-ui";
import { IconMoodSmile } from "@tabler/icons";
console.log("IconMoodSmile", IconMoodSmile);
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.
import { Create } from "@refinedev/chakra-ui";
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/chakra-ui 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/chakra-ui";
import { Box } from "@chakra-ui/react";
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 @refinedev/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. →
import { Create } from "@refinedev/chakra-ui";
const PostCreate: React.FC = () => {
return (
<Create
wrapperProps={{
borderColor: "blue",
borderStyle: "dashed",
borderWidth: "2px",
}}
>
<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 Box documentation from Chakra UI for detailed usage. →
import { Create } from "@refinedev/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. →
import { Create } from "@refinedev/chakra-ui";
const PostCreate: React.FC = () => {
return (
<Create
contentProps={{
borderColor: "blue",
borderStyle: "dashed",
borderWidth: "2px",
}}
>
<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/chakra-ui";
import { Button, Box } from "@chakra-ui/react";
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>
);
};
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. →
import { Create } from "@refinedev/chakra-ui";
import { Button } from "@chakra-ui/react";
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>
);
};
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/chakra-ui";
import { Button, HStack } from "@chakra-ui/react";
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>
);
};
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. →
import { Create } from "@refinedev/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
http://localhost:3000