react-admin

The documentation is organized by functional area to help you find specific implementation details:

• Architecture & Concepts: Core concepts like data fetching, security, and general architecture.
• App Configuration: Setting up CoreAdmin, resources, and routing.
• Data Fetching: Working with APIs and DataProviders.
• Security: Authentication, authorization, and access control.
• Views & Pages:
  • List Pages: Building list views, filtering, and pagination.
  • Creation & Edition: Forms, validation, and input components.
  • Show Pages: Detail views and field components.
• Components:
  • Fields: Display components for various data types.
  • Inputs: Form input components and validation.
• Internationalization: Multi-language support and localization.
• Utilities: Shared utilities and common patterns.

React-admin Enterprise Edition provides specialized packages for advanced functionality. These modules can be integrated into your application to handle complex requirements like AI assistance, auditing, real-time collaboration, and advanced form layouts.

Key Enterprise modules include:

• @react-admin/ra-ai: AI-powered components for text completion and improvement in forms.
• @react-admin/ra-audit-log: Tracking user actions and activity overview.
• @react-admin/ra-calendar: Event management with drag-and-drop capabilities.
• @react-admin/ra-editable-datagrid: Enhanced <Datagrid> with edit-in-place features.
• @react-admin/ra-form-layout: Complex layouts like wizards, accordions, and autosave.
• @react-admin/ra-json-schema-form: Form generation via JSON Schema.
• @react-admin/ra-navigation: Advanced page/menu layouts and smart breadcrumbs.
• @react-admin/ra-relationships: Specialized inputs for managing relationships (e.g., many-to-many via join tables).
• @react-admin/ra-rbac: Role-Based Access Control that extends authProvider for fine-grained permissions.
• @react-admin/ra-realtime: Real-time collaboration tools to prevent data loss and sync views.
• @react-admin/ra-search: Omnibox search integration for multiple resources.
• @react-admin/ra-tour: User onboarding and feature tutorials.
• @react-admin/ra-tree: Components for managing hierarchical tree structures.

The react-admin Store is a global, synchronous, persistent key-value database used for storing user preferences (e.g., interface language, theme, UI state). It persists between page loads using browser localStorage (or memory storage if localStorage is unavailable) and is automatically emptied when a user logs out.

It requires no setup and is available via several hooks. You can use it to manage simple UI states like toggling a panel or saving a user's preference.

import { useStore } from 'react-admin';
import { Button, Popover } from '@mui/material';

const HelpButton = () => {
    // useStore(key, defaultValue)
    const [helpOpen, setHelpOpen] = useStore('help.open', false);
    return (
        <>
            <Button onClick={() => setHelpOpen(v => !v)}>
                {helpOpen ? 'Hide' : 'Show'} help
            </Button>
            <Popover open={helpOpen} onClose={() => setHelpOpen(false)}>
                Help Content
            </Popover>
        </>
    );
};

ra-core is a headless single-page application (SPA) framework for React designed to build admin panels, internal tools, dashboards, ERPs, and B2B applications.

It manages the core business logic of an admin application, including:

• Data Management: Fetching, editing, and relational data aggregation.
• Navigation & Routing: Integrated with react-router.
• Security: Authentication and authorization logic.
• Internationalization: Multi-language support.
• Form Management: State management and validation (via react-hook-form).
• Performance: Intelligent caching and optimistic updates (via TanStack Query).

Because it is headless, it does not provide a UI kit. You are free to use any design system such as Shadcn UI, Material UI, Ant Design, Chakra UI, or custom components. It is the engine behind frameworks like React-Admin (Material UI) and Shadcn Admin Kit (Shadcn UI).

An authProvider is an adapter that allows ra-core to connect to any authentication backend. It is a simple object containing methods that ra-core calls to handle authentication (login/logout) and authorization (checking credentials and permissions).

If you are using TypeScript, you should use the AuthProvider type from ra-core to ensure your implementation is correct at compile-time.

Required Methods

• login(params): Sends credentials to the auth server.
• checkError(error): Determines if a dataProvider error is an authentication error.
• checkAuth(params): Validates if the user's credentials are still valid during navigation.
• logout(): Removes local credentials and notifies the server.

Optional Methods

• getIdentity(): Returns the user's profile (e.g., id, fullName, avatar).
• handleCallback(): Processes authentication callbacks for third-party providers (OAuth).
• canAccess(params): Checks authorization for specific actions over a resource.
• getPermissions(): Returns the user's permissions for permission-based authorization.

import type { AuthProvider } from 'ra-core';

const authProvider: AuthProvider = {
    // Implement required and optional methods here
};

You can apply validation to an entire form by passing a validate prop to the <Form> component. This function receives the entire record as input and must return an object where keys are field names and values are error messages (or translation keys).

Key behaviors:

• Translation Support: You can return translation keys (strings) or objects containing a message key and args for parameterized translations.
• ArrayInput Support: For ArrayInput, you can return a single error message for the whole array or an array of error objects targeting specific children.
• Limitation: You cannot use both form-level validation (validate on <Form>) and input-level validation (validate on <Input>) simultaneously due to react-hook-form constraints.

const validateUserCreation = (values) => {
    const errors = {};
    if (!values.firstName) {
        errors.firstName = 'The firstName is required';
    }
    if (!values.age) {
        // Return translation key
        errors.age = 'ra.validation.required';
    } else if (values.age < 18) {
        // Return object for parameterized translation
        errors.age = {
            message: 'ra.validation.minValue',
            args: { min: 18 }
        };
    }
    // Target children in an ArrayInput
    if (!values.children || !values.children.length) {
        errors.children = 'ra.validation.required';
    } else {
        errors.children = values.children.map(child => {
            const childErrors = {};
            if (!child || !child.firstName) {
                childErrors.firstName = 'The firstName is required';
            }
            return childErrors;
        });
    }
    return errors;
};

export const UserCreate = () => (
    <CreateBase>
        <Form validate={validateUserCreation}>
            <TextInput label="First Name" source="firstName" />
            <TextInput label="Age" source="age" />
            <ArrayInput label="Children" source="children">
                <SimpleFormIterator>
                    <TextInput label="First Name" source="firstName" />
                </SimpleFormIterator>
            </ArrayInput>
        </Form>
    </CreateBase>
);