useCreateController

useCreateController contains the headless logic of the <CreateBase> component. It’s useful to create a custom creation view. It’s also the base hook when building a custom view with another UI kit than Material UI.

useCreateController reads the resource name from the resource context and browser location, computes the form default values, prepares a form submit handler based on dataProvider.create(), computes the default page title, and returns them. Its return value matches the CreateContext shape.

useCreateController is used internally by <CreateBase>. If your Create view uses ra-core components like <Form>, prefer <CreateBase> to useCreateController as it takes care of creating a <CreateContext>.

Usage

Use useCreateController to create a custom creation view, with exactly the content you need.

import { useCreateController, Form } from "ra-core";
import { SelectInput, TextInput } from "./inputs";

export const BookCreate = () => {
    const { save } = useCreateController();
    return (
        <div style={{ padding: '2rem', maxWidth: '600px', margin: '0 auto' }}>
            <h1>Create book</h1>
            <div style={{ backgroundColor: '#f5f5f5', padding: '1.5rem', borderRadius: '8px' }}>
                <Form onSubmit={save}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                        <TextInput source="title" />
                        <TextInput source="author" />
                        <SelectInput source="availability" choices={[
                            { id: "in_stock", name: "In stock" },
                            { id: "out_of_stock", name: "Out of stock" },
                            { id: "out_of_print", name: "Out of print" },
                        ]} />
                        <button type="submit" style={{ padding: '0.5rem 1rem', marginTop: '1rem' }}>
                            Save
                        </button>
                    </div>
                </Form>
            </div>
        </div>
    );
};

Tip: If you just use the return value of useCreateController to put it in an CreateContext, use the <CreateBase> component instead for simpler markup.

Parameters

useCreateController accepts an object with the following keys, all optional:

• disableAuthentication: Disable the authentication check
• mutationMode: Switch to optimistic or undoable mutations (pessimistic by default)
• mutationOptions: Options for the dataProvider.create() call
• record: Use the provided record as base instead of fetching it
• redirect: Change the redirect location after successful creation
• resource: Override the name of the resource to create
• transform: Transform the form data before calling dataProvider.create()

These fields are documented in the <CreateBase> component documentation.

Return Value

useCreateController returns an object with the following keys:

const {
    defaultTitle, // Translated title based on the resource, e.g. 'Create New Post'
    mutationMode, // Mutation mode argument passed as parameter, or 'pessimistic' if not defined
    record, // Default values of the creation form
    redirect, // Default redirect route. Defaults to 'list'
    resource, // Resource name, deduced from the location. e.g. 'posts'
    save, // Update callback to be passed to the underlying form as submit handler
    saving, // Boolean, true when the dataProvider is called to create the record
} = useCreateController();

Security

<useCreateController> requires authentication and will redirect anonymous users to the login page. If you want to allow anonymous access, use the disableAuthentication prop.

If your authProvider implements Access Control, useCreateController will only render if the user has the “create” access to the related resource.

For instance, for the <PostCreate> page below:

import { useCreateController, Form } from 'ra-core';
import { TextInput } from './TextInput';

const PostCreate = ({ id }) => {
  const { isPending, error, save } = useCreateController({ resource: 'posts' })
  if (error) return <div>Error!</div>;
  if (isPending) return <div>Loading...</div>;
  return (
      <Form record={{}} onSubmit={save}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', padding: '1rem' }}>
            <TextInput source="title" />
            <TextInput source="author" />
            <TextInput source="published_at" />
            <button type="submit">Save</button>
        </div>
      </Form>
  );
}

useCreateController will call authProvider.canAccess() using the following parameters:

{ action: "create", resource: "posts" }

Users without access will be redirected to the Access Denied page.

Note: Access control is disabled when you use the disableAuthentication prop.