0
# Core Admin & Resources
1

2
This section covers the foundational components for setting up and configuring a React Admin application, including the main `<Admin>` component and resource definitions.
3

4
## Core Components
5

6
### Admin Component
7

8
The `<Admin>` component is the root component that initializes the entire React Admin application. It sets up routing, authentication, data providers, and the overall application context.
9

10
```typescript { .api }
11
import { Admin } from 'react-admin';
12

13
interface AdminProps {
14
  authProvider?: AuthProvider;
15
  dataProvider: DataProvider;
16
  i18nProvider?: I18nProvider;
17
  title?: string;
18
  theme?: Theme;
19
  layout?: LayoutComponent;
20
  dashboard?: DashboardComponent;
21
  loginPage?: LoginComponent | boolean;
22
  catchAll?: CatchAllComponent;
23
  loading?: LoadingComponent;
24
  basename?: string;
25
  children: React.ReactNode;
26
  disableTelemetry?: boolean;
27
  ready?: React.ComponentType;
28
  store?: Store;
29
  queryClient?: QueryClient;
30
  router?: Router;
31
  history?: History;
32
}
33

34
const Admin: React.FC<AdminProps>;
35
```
36

37
#### Parameters
38

39
- **dataProvider** *(required)*: The data provider that handles all backend communication
40
- **authProvider**: Authentication provider for login/logout functionality
41
- **i18nProvider**: Internationalization provider for multi-language support
42
- **title**: Application title displayed in the browser tab and app bar
43
- **theme**: Material-UI theme object for customizing appearance
44
- **layout**: Custom layout component to replace the default layout
45
- **dashboard**: Component to display on the home page
46
- **loginPage**: Custom login page component, or `false` to disable authentication
47
- **catchAll**: Component to display for 404 errors
48
- **loading**: Component to display during initial app loading
49
- **basename**: Base URL for routing when app is served from a subdirectory
50
- **children**: Resource definitions and custom routes
51
- **store**: Custom store for persisting application state
52
- **queryClient**: Custom React Query client for advanced caching configuration
53

54
#### Usage Example
55

56
```typescript
57
import { Admin, Resource } from 'react-admin';
58
import { dataProvider } from './dataProvider';
59
import { authProvider } from './authProvider';
60
import { theme } from './theme';
61
import Dashboard from './Dashboard';
62

63
const App = () => (
64
  <Admin
65
    dataProvider={dataProvider}
66
    authProvider={authProvider}
67
    title="My Admin App"
68
    theme={theme}
69
    dashboard={Dashboard}
70
  >
71
    <Resource name="posts" list={PostList} edit={PostEdit} />
72
    <Resource name="users" list={UserList} edit={UserEdit} />
73
  </Admin>
74
);
75
```
76

77
### Resource Component
78

79
The `<Resource>` component defines an entity in your application and its associated views (list, create, edit, show).
80

81
```typescript { .api }
82
import { Resource } from 'react-admin';
83

84
interface ResourceProps {
85
  name: string;
86
  list?: React.ComponentType;
87
  create?: React.ComponentType;
88
  edit?: React.ComponentType;
89
  show?: React.ComponentType;
90
  icon?: React.ComponentType;
91
  options?: ResourceOptions;
92
  recordRepresentation?: string | RecordToStringFunction;
93
  hasCreate?: boolean;
94
  hasEdit?: boolean;
95
  hasShow?: boolean;
96
  children?: React.ReactNode;
97
}
98

99
interface ResourceOptions {
100
  label?: string;
101
  [key: string]: any;
102
}
103

104
type RecordToStringFunction = (record: RaRecord) => string;
105

106
const Resource: React.FC<ResourceProps>;
107
```
108

109
#### Parameters
110

111
- **name** *(required)*: The resource name, used in URLs and API calls
112
- **list**: Component to display the list of records
113
- **create**: Component to create new records
114
- **edit**: Component to edit existing records  
115
- **show**: Component to display record details
116
- **icon**: Icon component to display in the menu
117
- **options**: Additional resource options like custom labels
118
- **recordRepresentation**: Function or field name to represent records as strings
119
- **hasCreate/hasEdit/hasShow**: Boolean flags to enable/disable specific views
120
- **children**: For nested resources or custom routing
121

122
#### Usage Examples
123

124
```typescript
125
// Basic resource with all views
126
<Resource 
127
  name="posts" 
128
  list={PostList} 
129
  create={PostCreate}
130
  edit={PostEdit} 
131
  show={PostShow}
132
  icon={PostIcon}
133
  options={{ label: 'Blog Posts' }}
134
/>
135

136
// Resource with limited views
137
<Resource 
138
  name="analytics" 
139
  list={AnalyticsList}
140
  hasCreate={false}
141
  hasEdit={false}
142
/>
143

144
// Resource with record representation
145
<Resource 
146
  name="users"
147
  list={UserList}
148
  recordRepresentation="name"
149
/>
150

151
// Resource with custom record representation function
152
<Resource 
153
  name="products"
154
  list={ProductList}
155
  recordRepresentation={(record) => `${record.name} (${record.sku})`}
156
/>
157
```
158

159
## Core Admin Components
160

161
### CoreAdmin
162

163
Lower-level admin component without Material-UI dependencies, useful for custom UI implementations.
164

165
```typescript { .api }
166
import { CoreAdmin } from 'react-admin';
167

168
interface CoreAdminProps {
169
  authProvider?: AuthProvider;
170
  dataProvider: DataProvider;
171
  i18nProvider?: I18nProvider;
172
  queryClient?: QueryClient;
173
  store?: Store;
174
  history?: History;
175
  children: React.ReactNode;
176
}
177

178
const CoreAdmin: React.FC<CoreAdminProps>;
179
```
180

181
### CoreAdminContext
182

183
Provides admin context without rendering any UI, useful for custom layouts.
184

185
```typescript { .api }
186
import { CoreAdminContext } from 'react-admin';
187

188
interface CoreAdminContextProps {
189
  authProvider?: AuthProvider;
190
  dataProvider: DataProvider;
191
  i18nProvider?: I18nProvider;
192
  queryClient?: QueryClient;
193
  store?: Store;
194
  history?: History;
195
  children: React.ReactNode;
196
}
197

198
const CoreAdminContext: React.FC<CoreAdminContextProps>;
199
```
200

201
### CoreAdminRoutes
202

203
Defines the routing structure for resources and custom routes.
204

205
```typescript { .api }
206
import { CoreAdminRoutes } from 'react-admin';
207

208
interface CoreAdminRoutesProps {
209
  layout?: LayoutComponent;
210
  dashboard?: DashboardComponent;
211
  catchAll?: CatchAllComponent;
212
  loading?: LoadingComponent;
213
  children?: React.ReactNode;
214
}
215

216
const CoreAdminRoutes: React.FC<CoreAdminRoutesProps>;
217
```
218

219
### CoreAdminUI
220

221
Core UI logic component that renders the admin interface structure.
222

223
```typescript { .api }
224
import { CoreAdminUI } from 'react-admin';
225

226
interface CoreAdminUIProps {
227
  layout?: LayoutComponent;
228
  dashboard?: DashboardComponent;
229
  loginPage?: LoginComponent | boolean;
230
  catchAll?: CatchAllComponent;
231
  loading?: LoadingComponent;
232
  title?: string;
233
}
234

235
const CoreAdminUI: React.FC<CoreAdminUIProps>;
236
```
237

238
## Resource Context and Hooks
239

240
### Resource Context
241

242
Access current resource information within components.
243

244
```typescript { .api }
245
import { useResourceContext, useResourceDefinition } from 'react-admin';
246

247
// Get current resource name
248
const useResourceContext: () => string | undefined;
249

250
// Get current resource definition
251
const useResourceDefinition: (options?: { resource?: string }) => ResourceDefinition | undefined;
252

253
// Get all resource definitions
254
const useResourceDefinitions: () => ResourceDefinitionMap;
255

256
// Get resource label
257
const useGetResourceLabel: () => (resource: string, count?: number) => string;
258
```
259

260
#### Usage Example
261

262
```typescript
263
import { useResourceContext, useResourceDefinition } from 'react-admin';
264

265
const MyComponent = () => {
266
  const resource = useResourceContext(); // Current resource name
267
  const resourceDefinition = useResourceDefinition({ resource });
268
  
269
  return (
270
    <div>
271
      <h1>Current Resource: {resource}</h1>
272
      <p>Has create: {resourceDefinition?.hasCreate}</p>
273
    </div>
274
  );
275
};
276
```
277

278
### Resource Definition Types
279

280
```typescript { .api }
281
interface ResourceDefinition {
282
  name: string;
283
  options?: ResourceOptions;
284
  hasList?: boolean;
285
  hasCreate?: boolean;
286
  hasEdit?: boolean;
287
  hasShow?: boolean;
288
  icon?: React.ComponentType;
289
  recordRepresentation?: string | RecordToStringFunction;
290
}
291

292
type ResourceDefinitionMap = {
293
  [key: string]: ResourceDefinition;
294
};
295
```
296

297
## Custom Routes
298

299
Add custom pages and routes to your admin application.
300

301
```typescript { .api }
302
import { CustomRoutes } from 'react-admin';
303

304
interface CustomRoutesProps {
305
  noLayout?: boolean;
306
  children: React.ReactNode;
307
}
308

309
const CustomRoutes: React.FC<CustomRoutesProps>;
310
```
311

312
### Usage Example
313

314
```typescript
315
import { Admin, Resource, CustomRoutes } from 'react-admin';
316
import { Route } from 'react-router-dom';
317
import ReportsPage from './ReportsPage';
318
import SettingsPage from './SettingsPage';
319

320
const App = () => (
321
  <Admin dataProvider={dataProvider}>
322
    <Resource name="posts" list={PostList} />
323
    
324
    <CustomRoutes>
325
      <Route path="/reports" element={<ReportsPage />} />
326
      <Route path="/settings" element={<SettingsPage />} />
327
    </CustomRoutes>
328
    
329
    {/* Routes without layout */}
330
    <CustomRoutes noLayout>
331
      <Route path="/public-report" element={<PublicReportPage />} />
332
    </CustomRoutes>
333
  </Admin>
334
);
335
```
336

337
## Record Representation
338

339
Control how records are displayed as strings throughout the application.
340

341
```typescript { .api }
342
import { useGetRecordRepresentation } from 'react-admin';
343

344
const useGetRecordRepresentation: (resource: string) => (record: RaRecord) => string;
345
```
346

347
### Usage Examples
348

349
```typescript
350
// String field representation
351
<Resource name="users" recordRepresentation="name" />
352

353
// Function representation
354
<Resource 
355
  name="products" 
356
  recordRepresentation={(record) => `${record.title} - $${record.price}`}
357
/>
358

359
// Using the hook in a component
360
const ProductReferenceField = ({ record }) => {
361
  const getRecordRepresentation = useGetRecordRepresentation('products');
362
  
363
  return <span>{getRecordRepresentation(record)}</span>;
364
};
365
```
366

367
## Configuration Examples
368

369
### Minimal Setup
370

371
```typescript
372
import { Admin, Resource, ListGuesser } from 'react-admin';
373
import { dataProvider } from './dataProvider';
374

375
const App = () => (
376
  <Admin dataProvider={dataProvider}>
377
    <Resource name="posts" list={ListGuesser} />
378
  </Admin>
379
);
380
```
381

382
### Full-Featured Setup
383

384
```typescript
385
import { 
386
  Admin, 
387
  Resource, 
388
  CustomRoutes,
389
  defaultTheme 
390
} from 'react-admin';
391
import { Route } from 'react-router-dom';
392
import { dataProvider } from './dataProvider';
393
import { authProvider } from './authProvider';
394
import { i18nProvider } from './i18nProvider';
395
import CustomLayout from './CustomLayout';
396
import Dashboard from './Dashboard';
397

398
const App = () => (
399
  <Admin
400
    dataProvider={dataProvider}
401
    authProvider={authProvider}
402
    i18nProvider={i18nProvider}
403
    title="Advanced Admin"
404
    theme={defaultTheme}
405
    layout={CustomLayout}
406
    dashboard={Dashboard}
407
  >
408
    <Resource 
409
      name="posts" 
410
      list={PostList}
411
      create={PostCreate}
412
      edit={PostEdit}
413
      show={PostShow}
414
      icon={PostIcon}
415
      options={{ label: 'Blog Posts' }}
416
      recordRepresentation="title"
417
    />
418
    
419
    <Resource 
420
      name="users"
421
      list={UserList}
422
      edit={UserEdit}
423
      hasShow={false}
424
    />
425
    
426
    <CustomRoutes>
427
      <Route path="/analytics" element={<AnalyticsPage />} />
428
    </CustomRoutes>
429
  </Admin>
430
);
431
```
432

433
The core admin setup provides the foundation for your React Admin application, with flexible resource definitions and routing capabilities that can scale from simple CRUD interfaces to complex admin systems.