or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

admin-core.md advanced.md auth.md data-management.md detail-views.md forms-inputs.md i18n.md index.md lists-data-display.md ui-components.md

tile.json

tessl/npm-react-admin

A frontend Framework for building admin applications on top of REST services, using ES6, React and Material UI

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/react-admin@4.16.x

To install, run

npx @tessl/cli install tessl/npm-react-admin@4.16.0

React Admin

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.

Package Information

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

Core Imports

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

// Main entry point
import { Admin, Resource } from 'react-admin';

// Core data hooks
import { 
  useGetList, 
  useGetOne, 
  useCreate, 
  useUpdate, 
  useDelete,
  useDataProvider 
} from 'react-admin';

// Authentication
import { 
  useAuthProvider, 
  useLogin, 
  useLogout, 
  usePermissions,
  Authenticated 
} from 'react-admin';

// Form components
import { 
  Form, 
  TextInput, 
  BooleanInput, 
  SelectInput, 
  DateInput,
  SaveButton 
} from 'react-admin';

// Display components
import { 
  List, 
  Datagrid, 
  TextField, 
  DateField, 
  BooleanField,
  Show, 
  Edit, 
  Create 
} from 'react-admin';

// Layout and UI
import { 
  Layout, 
  AppBar, 
  Sidebar, 
  Menu,
  Title,
  TopToolbar 
} from 'react-admin';

Basic Usage

Here's a minimal React Admin application:

import { Admin, Resource, ListGuesser, EditGuesser, ShowGuesser } from 'react-admin';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';

const App = () => (
  <Admin 
    dataProvider={dataProvider} 
    authProvider={authProvider}
    title="My Admin App"
  >
    <Resource 
      name="posts" 
      list={ListGuesser} 
      edit={EditGuesser} 
      show={ShowGuesser} 
    />
    <Resource 
      name="users" 
      list={ListGuesser} 
      edit={EditGuesser} 
      show={ShowGuesser} 
    />
  </Admin>
);

export default App;

Admin Component

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

interface AdminProps {
  authProvider?: AuthProvider;
  dataProvider: DataProvider;
  i18nProvider?: I18nProvider;
  title?: string;
  theme?: Theme;
  layout?: LayoutComponent;
  dashboard?: DashboardComponent;
  loginPage?: LoginComponent | boolean;
  catchAll?: CatchAllComponent;
  loading?: LoadingComponent;
  basename?: string;
  children: React.ReactNode;
}

const Admin: React.FC<AdminProps>;

Resource Component

Resources define the entities in your application:

interface ResourceProps {
  name: string;
  list?: React.ComponentType;
  create?: React.ComponentType;
  edit?: React.ComponentType;
  show?: React.ComponentType;
  icon?: React.ComponentType;
  options?: ResourceOptions;
  recordRepresentation?: string | RecordToStringFunction;
}

const Resource: React.FC<ResourceProps>;

Architecture

React Admin follows a modular architecture with several key layers:

1. Data Layer

Data Provider: Backend-agnostic data access layer
Auth Provider: Authentication and authorization handling
Query/Mutation Hooks: Built on React Query for optimal caching

2. Controller Layer

Controller Hooks: Business logic for CRUD operations
State Management: Local state for forms, lists, and UI
Routing: Declarative resource-based routing

3. UI Layer

Material-UI Components: Pre-built admin interface components
Layout System: Configurable app shell with navigation
Theming System: Customizable Material-UI themes

4. Form Layer

React Hook Form: Form state management and validation
Input Components: Rich set of form inputs with validation
Form Layouts: Flexible form organization and display

Capabilities

React Admin provides comprehensive functionality across multiple domains:

Core Admin & Resources

Set up and configure your admin application with the main <Admin> component and define resources:

// Main admin setup
const Admin: React.FC<AdminProps>;
const Resource: React.FC<ResourceProps>;

// Core context and routing
const CoreAdmin: React.FC<CoreAdminProps>;
const CoreAdminContext: React.FC<CoreAdminContextProps>;
const CustomRoutes: React.FC<{ children: React.ReactNode }>;

Data Management

Handle all data operations with powerful hooks and providers:

// Query hooks
const useGetList: (resource: string, params?: GetListParams) => UseQueryResult<GetListResult>;
const useGetOne: (resource: string, params: GetOneParams) => UseQueryResult<GetOneResult>;
const useGetMany: (resource: string, params: GetManyParams) => UseQueryResult<GetManyResult>;

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

// Data provider interface
interface DataProvider {
  getList: (resource: string, params: GetListParams) => Promise<GetListResult>;
  getOne: (resource: string, params: GetOneParams) => Promise<GetOneResult>;
  getMany: (resource: string, params: GetManyParams) => Promise<GetManyResult>;
  create: (resource: string, params: CreateParams) => Promise<CreateResult>;
  update: (resource: string, params: UpdateParams) => Promise<UpdateResult>;
  delete: (resource: string, params: DeleteParams) => Promise<DeleteResult>;
}

Authentication & Authorization

Secure your application with flexible authentication and permission systems:

// Auth hooks
const useLogin: () => LoginFunction;
const useLogout: () => LogoutFunction;
const useAuthState: () => AuthStateResult;
const usePermissions: () => PermissionsResult;

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

// Auth provider interface
interface AuthProvider {
  login: (params: any) => Promise<any>;
  logout: (params?: any) => Promise<void>;
  checkAuth: (params?: any) => Promise<void>;
  checkError: (error: any) => Promise<void>;
  getPermissions: (params?: any) => Promise<any>;
  getIdentity?: () => Promise<UserIdentity>;
}

Forms & Inputs

Build sophisticated forms with validation, relationships, and rich input components:

// Form components
const Form: React.FC<FormProps>;
const TextInput: React.FC<TextInputProps>;
const NumberInput: React.FC<NumberInputProps>;
const BooleanInput: React.FC<BooleanInputProps>;
const SelectInput: React.FC<SelectInputProps>;
const ReferenceInput: React.FC<ReferenceInputProps>;
const AutocompleteInput: React.FC<AutocompleteInputProps>;

// Form hooks
const useInput: (props: UseInputProps) => UseInputResult;
const useForm: () => UseFormResult;

List Views & Data Display

Display and interact with data collections using powerful list components:

// List components
const List: React.FC<ListProps>;
const Datagrid: React.FC<DatagridProps>;
const SimpleList: React.FC<SimpleListProps>;
const InfiniteList: React.FC<InfiniteListProps>;

// Field components
const TextField: React.FC<FieldProps>;
const NumberField: React.FC<FieldProps>;
const DateField: React.FC<DateFieldProps>;
const BooleanField: React.FC<BooleanFieldProps>;
const ReferenceField: React.FC<ReferenceFieldProps>;

// List features
const Filter: React.FC<FilterProps>;
const Pagination: React.FC<PaginationProps>;
const BulkActions: React.FC<BulkActionsProps>;

Detail Views

Create comprehensive Create, Edit, and Show pages for your resources:

// Detail view components
const Show: React.FC<ShowProps>;
const Edit: React.FC<EditProps>;
const Create: React.FC<CreateProps>;

// Layout components
const SimpleShowLayout: React.FC<SimpleShowLayoutProps>;
const TabbedShowLayout: React.FC<TabbedShowLayoutProps>;
const Tab: React.FC<TabProps>;

Layout & Navigation

Structure your application with flexible layout and navigation components:

// Layout components
const Layout: React.FC<LayoutProps>;
const AppBar: React.FC<AppBarProps>;
const Sidebar: React.FC<SidebarProps>;
const Menu: React.FC<MenuProps>;

// Navigation
const MenuItemLink: React.FC<MenuItemLinkProps>;
const DashboardMenuItem: React.FC<DashboardMenuItemProps>;
const ResourceMenuItem: React.FC<ResourceMenuItemProps>;

UI Components

Rich set of buttons, notifications, and theming capabilities:

// Button components
const Button: React.FC<ButtonProps>;
const SaveButton: React.FC<SaveButtonProps>;
const DeleteButton: React.FC<DeleteButtonProps>;
const CreateButton: React.FC<CreateButtonProps>;

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

// Theming
const useTheme: () => ThemeResult;
const ThemeProvider: React.FC<ThemeProviderProps>;

Internationalization

Multi-language support with flexible translation system:

// i18n hooks
const useTranslate: () => TranslateFunction;
const useLocale: () => string;
const useSetLocale: () => SetLocaleFunction;

// i18n components
const TranslatableInputs: React.FC<TranslatableInputsProps>;
const TranslatableFields: React.FC<TranslatableFieldsProps>;

// i18n provider interface
interface I18nProvider {
  translate: (key: string, options?: any) => string;
  changeLocale: (locale: string) => Promise<void>;
  getLocale: () => string;
  getLocales?: () => Locale[];
}

Advanced Features

Export functionality, preferences system, stores, and utilities:

// Export functionality
const useExporter: () => ExporterFunction;
const ExportButton: React.FC<ExportButtonProps>;

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

// Store management
const useStore: (key: string, defaultValue?: any) => StoreResult;
const localStorageStore: Store;
const memoryStore: Store;

Key Design Principles

Declarative: Define your admin interface through JSX components
Backend Agnostic: Works with any REST/GraphQL API through data providers
Extensible: Every component can be customized or replaced
Type Safe: Full TypeScript support with comprehensive type definitions
Performance: Built on React Query for optimal data fetching and caching
Accessibility: Material-UI ensures WCAG compliance
Responsive: Mobile-friendly layouts and components

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.