Migrating from react-admin
How Chelone's API differs from react-admin / ra-ui-materialui, and how to port a resource.
Chelone's component API is close to react-admin's. Many component names and binding patterns carry over, but hooks, provider types, and page composition need checking when porting a resource.
What stays the same
<Admin>,<Resource>,<List>,<Edit>,<Create>,<Show>.- The field / input vocabulary:
<TextField>,<ReferenceField>,<BooleanField>,<TextInput>,<ReferenceInput>,<SelectInput>, … - The Data Provider method names (
getList/getOne/getMany/create/update/delete), with contract differences listed below. source-based binding and the ambient record / list / form contexts.
What changes
| react-admin | Chelone |
|---|---|
ra-core hooks | Most have same-name, TanStack-backed @chelone/react hooks; see the missing hooks below |
| Material UI components | shadcn components from the @chelone registry |
<SimpleForm> wrapper | inputs are direct <Edit> / <Create> children |
<Datagrid> | <DataTable> with <DataTable.Col> |
<List filters={…}> with built-in chrome | <List> has no filters prop and renders no filter form, pagination, or default actions; compose these explicitly |
per-input validate={…} | Still supported alongside a resource-level Zod schema (defineResources) |
ra-i18n-polyglot, %{name} | createI18n / defineMessages, single-brace {name} |
| MUI theme palette | CSS variables + the shadcn registry theme |
Missing hooks include useUpdateMany, useDeleteMany, useListParams,
useRecordSelection, useUnselectAll, useReferenceInputController, and
useSimpleFormIterator. Check custom hooks and bulk-action code before porting.
Provider contracts and setup
paginationis optional and accepts page-based or cursor-based pagination.sortis optional and accepts a single sort object or an array of sort objects.- List results may omit
total; update and delete parameters may omitpreviousData. <Admin>requires aqueryClientprop. Create a TanStack QueryQueryClientand pass it alongsidedataProvider.
Porting a resource
-
Replace the
<Datagrid>with<DataTable>and each column with a<DataTable.Col source="…">. -
Drop the
<SimpleForm>wrapper — move its input children up to be direct<Edit>/<Create>children, and add a<Toolbar>(Edit) or<SaveButton>(Create). -
Keep per-input
validaterules, or add a Zod schema withdefineResources({ posts: { schema } }). Both can be used together. -
Swap
%{name}interpolation for{name}in any custom translations, and plural strings froma |||| bto{ one, other }objects. -
Check the provider contracts above, pass
queryClientto<Admin>, and compose the list's filter form, pagination, and actions as needed.