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

Create

http://localhost:3000
Live previews only work with the latest documentation.
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 (
    <RefineMantine.MantineProvider
      theme={RefineMantine.LightTheme}
      withNormalizeCSS
      withGlobalStyles
    >
      <RefineMantine.Global
        styles={{ body: { WebkitFontSmoothing: 'auto' } }}
      />
      <RefineMantine.NotificationsProvider position="top-right">
        {children}
      </RefineMantine.NotificationsProvider>
    </RefineMantine.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.

http://localhost:3000
Live previews only work with the latest documentation.
import {
  Create,
  Select,
  TextInput,
  useForm,
  useSelect,
} from '@pankod/refine-mantine'

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

http://localhost:3000
Live previews only work with the latest documentation.
import { Create, Title } from '@pankod/refine-mantine'

const PostCreate: React.FC = () => {
  return (
    <Create title={<Title order={3}>Custom Title</Title>}>
      <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. &#8594

http://localhost:3000
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-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. 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. &#8594

http://localhost:3000
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-mantine'

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.

http://localhost:3000
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-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.

http://localhost:3000
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-mantine'

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

Refer to the Breadcrumb documentation for detailed usage. &#8594

tip

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

http://localhost:3000
Live previews only work with the latest documentation.
import { Create, Breadcrumb } from '@pankod/refine-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 @pankod/refine-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. &#8594

http://localhost:3000
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-mantine'

const PostCreate: React.FC = () => {
  return (
    <Create
      wrapperProps={{
        style: {
          border: '2px dashed cornflowerblue',
          padding: '16px',
        },
      }}
    >
      <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 Group documentation from Mantine for detailed usage. &#8594

http://localhost:3000
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-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. &#8594

http://localhost:3000
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-mantine'

const PostCreate: React.FC = () => {
  return (
    <Create
      contentProps={{
        style: {
          border: '2px dashed cornflowerblue',
          padding: '16px',
        },
      }}
    >
      <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.

http://localhost:3000
Live previews only work with the latest documentation.
import { Create, Button } from '@pankod/refine-mantine'

const PostCreate: React.FC = () => {
  return (
    <Create
      headerButtons={({ defaultButtons }) => (
        <>
          {defaultButtons}
          <Button type="primary">Custom Button</Button>
        </>
      )}
    >
      <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 Group documentation from Mantine for detailed usage. &#8594

http://localhost:3000
Live previews only work with the latest documentation.
import { Create, Button } from '@pankod/refine-mantine'

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>
  )
}

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.

http://localhost:3000
Live previews only work with the latest documentation.
import { Create, Button } from '@pankod/refine-mantine'

const PostCreate: React.FC = () => {
  return (
    <Create
      footerButtons={({ defaultButtons }) => (
        <>
          {defaultButtons}
          <Button variant="gradient">Custom Button</Button>
        </>
      )}
    >
      <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 Group documentation from Mantine for detailed usage. &#8594

http://localhost:3000
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-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​