0
# React Admin
1

2
React Admin is a comprehensive frontend framework for building admin applications on top of REST services. It provides a complete toolkit built on React, Material-UI, TypeScript, and React Hook Form, offering everything needed to create sophisticated admin interfaces with minimal code.
3

4
## Package Information
5

6
- **Name**: `react-admin`
7
- **Type**: Frontend Framework / React Library  
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm install react-admin` or `yarn add react-admin`
10
- **Bundle Size**: ~300KB minified + gzipped (core + Material-UI components)
11
- **Dependencies**: React 17+, Material-UI v5, React Hook Form, React Query
12

13
## Core Imports
14

15
React Admin exports from multiple internal packages, providing a unified API:
16

17
```typescript { .api }
18
// Main entry point
19
import { Admin, Resource } from 'react-admin';
20

21
// Core data hooks
22
import { 
23
  useGetList, 
24
  useGetOne, 
25
  useCreate, 
26
  useUpdate, 
27
  useDelete,
28
  useDataProvider 
29
} from 'react-admin';
30

31
// Authentication
32
import { 
33
  useAuthProvider, 
34
  useLogin, 
35
  useLogout, 
36
  usePermissions,
37
  Authenticated 
38
} from 'react-admin';
39

40
// Form components
41
import { 
42
  Form, 
43
  TextInput, 
44
  BooleanInput, 
45
  SelectInput, 
46
  DateInput,
47
  SaveButton 
48
} from 'react-admin';
49

50
// Display components
51
import { 
52
  List, 
53
  Datagrid, 
54
  TextField, 
55
  DateField, 
56
  BooleanField,
57
  Show, 
58
  Edit, 
59
  Create 
60
} from 'react-admin';
61

62
// Layout and UI
63
import { 
64
  Layout, 
65
  AppBar, 
66
  Sidebar, 
67
  Menu,
68
  Title,
69
  TopToolbar 
70
} from 'react-admin';
71
```
72

73
## Basic Usage
74

75
Here's a minimal React Admin application:
76

77
```typescript
78
import { Admin, Resource, ListGuesser, EditGuesser, ShowGuesser } from 'react-admin';
79
import { dataProvider } from './dataProvider';
80
import { authProvider } from './authProvider';
81

82
const App = () => (
83
  <Admin 
84
    dataProvider={dataProvider} 
85
    authProvider={authProvider}
86
    title="My Admin App"
87
  >
88
    <Resource 
89
      name="posts" 
90
      list={ListGuesser} 
91
      edit={EditGuesser} 
92
      show={ShowGuesser} 
93
    />
94
    <Resource 
95
      name="users" 
96
      list={ListGuesser} 
97
      edit={EditGuesser} 
98
      show={ShowGuesser} 
99
    />
100
  </Admin>
101
);
102

103
export default App;
104
```
105

106
### Admin Component
107

108
The `<Admin>` component is the main entry point that sets up the entire application:
109

110
```typescript { .api }
111
interface AdminProps {
112
  authProvider?: AuthProvider;
113
  dataProvider: DataProvider;
114
  i18nProvider?: I18nProvider;
115
  title?: string;
116
  theme?: Theme;
117
  layout?: LayoutComponent;
118
  dashboard?: DashboardComponent;
119
  loginPage?: LoginComponent | boolean;
120
  catchAll?: CatchAllComponent;
121
  loading?: LoadingComponent;
122
  basename?: string;
123
  children: React.ReactNode;
124
}
125

126
const Admin: React.FC<AdminProps>;
127
```
128

129
### Resource Component
130

131
Resources define the entities in your application:
132

133
```typescript { .api }
134
interface ResourceProps {
135
  name: string;
136
  list?: React.ComponentType;
137
  create?: React.ComponentType;
138
  edit?: React.ComponentType;
139
  show?: React.ComponentType;
140
  icon?: React.ComponentType;
141
  options?: ResourceOptions;
142
  recordRepresentation?: string | RecordToStringFunction;
143
}
144

145
const Resource: React.FC<ResourceProps>;
146
```
147

148
## Architecture
149

150
React Admin follows a modular architecture with several key layers:
151

152
### 1. Data Layer
153
- **Data Provider**: Backend-agnostic data access layer
154
- **Auth Provider**: Authentication and authorization handling  
155
- **Query/Mutation Hooks**: Built on React Query for optimal caching
156

157
### 2. Controller Layer
158
- **Controller Hooks**: Business logic for CRUD operations
159
- **State Management**: Local state for forms, lists, and UI
160
- **Routing**: Declarative resource-based routing
161

162
### 3. UI Layer
163
- **Material-UI Components**: Pre-built admin interface components
164
- **Layout System**: Configurable app shell with navigation
165
- **Theming System**: Customizable Material-UI themes
166

167
### 4. Form Layer
168
- **React Hook Form**: Form state management and validation
169
- **Input Components**: Rich set of form inputs with validation
170
- **Form Layouts**: Flexible form organization and display
171

172
## Capabilities
173

174
React Admin provides comprehensive functionality across multiple domains:
175

176
### [Core Admin & Resources](./admin-core.md)
177
Set up and configure your admin application with the main `<Admin>` component and define resources:
178

179
```typescript { .api }
180
// Main admin setup
181
const Admin: React.FC<AdminProps>;
182
const Resource: React.FC<ResourceProps>;
183

184
// Core context and routing
185
const CoreAdmin: React.FC<CoreAdminProps>;
186
const CoreAdminContext: React.FC<CoreAdminContextProps>;
187
const CustomRoutes: React.FC<{ children: React.ReactNode }>;
188
```
189

190
### [Data Management](./data-management.md)
191
Handle all data operations with powerful hooks and providers:
192

193
```typescript { .api }
194
// Query hooks
195
const useGetList: (resource: string, params?: GetListParams) => UseQueryResult<GetListResult>;
196
const useGetOne: (resource: string, params: GetOneParams) => UseQueryResult<GetOneResult>;
197
const useGetMany: (resource: string, params: GetManyParams) => UseQueryResult<GetManyResult>;
198

199
// Mutation hooks  
200
const useCreate: (resource?: string, options?: UseCreateOptions) => CreateMutationResult;
201
const useUpdate: (resource?: string, options?: UseUpdateOptions) => UpdateMutationResult;
202
const useDelete: (resource?: string, options?: UseDeleteOptions) => DeleteMutationResult;
203

204
// Data provider interface
205
interface DataProvider {
206
  getList: (resource: string, params: GetListParams) => Promise<GetListResult>;
207
  getOne: (resource: string, params: GetOneParams) => Promise<GetOneResult>;
208
  getMany: (resource: string, params: GetManyParams) => Promise<GetManyResult>;
209
  create: (resource: string, params: CreateParams) => Promise<CreateResult>;
210
  update: (resource: string, params: UpdateParams) => Promise<UpdateResult>;
211
  delete: (resource: string, params: DeleteParams) => Promise<DeleteResult>;
212
}
213
```
214

215
### [Authentication & Authorization](./auth.md)
216
Secure your application with flexible authentication and permission systems:
217

218
```typescript { .api }
219
// Auth hooks
220
const useLogin: () => LoginFunction;
221
const useLogout: () => LogoutFunction;
222
const useAuthState: () => AuthStateResult;
223
const usePermissions: () => PermissionsResult;
224

225
// Auth components
226
const Authenticated: React.FC<{ children: React.ReactNode }>;
227
const Login: React.FC<LoginProps>;
228

229
// Auth provider interface
230
interface AuthProvider {
231
  login: (params: any) => Promise<any>;
232
  logout: (params?: any) => Promise<void>;
233
  checkAuth: (params?: any) => Promise<void>;
234
  checkError: (error: any) => Promise<void>;
235
  getPermissions: (params?: any) => Promise<any>;
236
  getIdentity?: () => Promise<UserIdentity>;
237
}
238
```
239

240
### [Forms & Inputs](./forms-inputs.md)
241
Build sophisticated forms with validation, relationships, and rich input components:
242

243
```typescript { .api }
244
// Form components
245
const Form: React.FC<FormProps>;
246
const TextInput: React.FC<TextInputProps>;
247
const NumberInput: React.FC<NumberInputProps>;
248
const BooleanInput: React.FC<BooleanInputProps>;
249
const SelectInput: React.FC<SelectInputProps>;
250
const ReferenceInput: React.FC<ReferenceInputProps>;
251
const AutocompleteInput: React.FC<AutocompleteInputProps>;
252

253
// Form hooks
254
const useInput: (props: UseInputProps) => UseInputResult;
255
const useForm: () => UseFormResult;
256
```
257

258
### [List Views & Data Display](./lists-data-display.md)
259
Display and interact with data collections using powerful list components:
260

261
```typescript { .api }
262
// List components
263
const List: React.FC<ListProps>;
264
const Datagrid: React.FC<DatagridProps>;
265
const SimpleList: React.FC<SimpleListProps>;
266
const InfiniteList: React.FC<InfiniteListProps>;
267

268
// Field components
269
const TextField: React.FC<FieldProps>;
270
const NumberField: React.FC<FieldProps>;
271
const DateField: React.FC<DateFieldProps>;
272
const BooleanField: React.FC<BooleanFieldProps>;
273
const ReferenceField: React.FC<ReferenceFieldProps>;
274

275
// List features
276
const Filter: React.FC<FilterProps>;
277
const Pagination: React.FC<PaginationProps>;
278
const BulkActions: React.FC<BulkActionsProps>;
279
```
280

281
### [Detail Views](./detail-views.md)
282
Create comprehensive Create, Edit, and Show pages for your resources:
283

284
```typescript { .api }
285
// Detail view components
286
const Show: React.FC<ShowProps>;
287
const Edit: React.FC<EditProps>;
288
const Create: React.FC<CreateProps>;
289

290
// Layout components
291
const SimpleShowLayout: React.FC<SimpleShowLayoutProps>;
292
const TabbedShowLayout: React.FC<TabbedShowLayoutProps>;
293
const Tab: React.FC<TabProps>;
294
```
295

296
### [Layout & Navigation](./layout-navigation.md)
297
Structure your application with flexible layout and navigation components:
298

299
```typescript { .api }
300
// Layout components
301
const Layout: React.FC<LayoutProps>;
302
const AppBar: React.FC<AppBarProps>;
303
const Sidebar: React.FC<SidebarProps>;
304
const Menu: React.FC<MenuProps>;
305

306
// Navigation
307
const MenuItemLink: React.FC<MenuItemLinkProps>;
308
const DashboardMenuItem: React.FC<DashboardMenuItemProps>;
309
const ResourceMenuItem: React.FC<ResourceMenuItemProps>;
310
```
311

312
### [UI Components](./ui-components.md)
313
Rich set of buttons, notifications, and theming capabilities:
314

315
```typescript { .api }
316
// Button components
317
const Button: React.FC<ButtonProps>;
318
const SaveButton: React.FC<SaveButtonProps>;
319
const DeleteButton: React.FC<DeleteButtonProps>;
320
const CreateButton: React.FC<CreateButtonProps>;
321

322
// Notifications
323
const useNotify: () => NotifyFunction;
324
const Notification: React.FC<NotificationProps>;
325

326
// Theming
327
const useTheme: () => ThemeResult;
328
const ThemeProvider: React.FC<ThemeProviderProps>;
329
```
330

331
### [Internationalization](./i18n.md)
332
Multi-language support with flexible translation system:
333

334
```typescript { .api }
335
// i18n hooks
336
const useTranslate: () => TranslateFunction;
337
const useLocale: () => string;
338
const useSetLocale: () => SetLocaleFunction;
339

340
// i18n components
341
const TranslatableInputs: React.FC<TranslatableInputsProps>;
342
const TranslatableFields: React.FC<TranslatableFieldsProps>;
343

344
// i18n provider interface
345
interface I18nProvider {
346
  translate: (key: string, options?: any) => string;
347
  changeLocale: (locale: string) => Promise<void>;
348
  getLocale: () => string;
349
  getLocales?: () => Locale[];
350
}
351
```
352

353
### [Advanced Features](./advanced.md)
354
Export functionality, preferences system, stores, and utilities:
355

356
```typescript { .api }
357
// Export functionality
358
const useExporter: () => ExporterFunction;
359
const ExportButton: React.FC<ExportButtonProps>;
360

361
// Preferences system
362
const usePreference: (key: string, defaultValue?: any) => PreferenceResult;
363
const Configurable: React.FC<ConfigurableProps>;
364

365
// Store management
366
const useStore: (key: string, defaultValue?: any) => StoreResult;
367
const localStorageStore: Store;
368
const memoryStore: Store;
369
```
370

371
## Key Design Principles
372

373
1. **Declarative**: Define your admin interface through JSX components
374
2. **Backend Agnostic**: Works with any REST/GraphQL API through data providers
375
3. **Extensible**: Every component can be customized or replaced
376
4. **Type Safe**: Full TypeScript support with comprehensive type definitions
377
5. **Performance**: Built on React Query for optimal data fetching and caching
378
6. **Accessibility**: Material-UI ensures WCAG compliance
379
7. **Responsive**: Mobile-friendly layouts and components
380

381
React Admin enables rapid development of sophisticated admin interfaces while maintaining flexibility for complex customization needs. Each capability area provides both high-level components for quick setup and low-level hooks for advanced customization.