React-admin

https://github.com/marmelab/react-admin
Admin
A frontend Framework for building single-page applications running in the browser on top of...
Tokens:1,035,504
Snippets:7,006
Trust Score:10
License:MIT
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Run example applications with Make or Yarn

Source: https://github.com/marmelab/react-admin/blob/master/README.md

Install dependencies at the project root and start local example applications such as simple, tutorial, or demo. Browse to the URL printed in the console output after running.

```sh
# At the react-admin project root
make install
# or
yarn install

# Run the simple application
make run-simple

# Run the tutorial application
make build
make run-tutorial

# Run the demo application
make build
make run-demo
```

--------------------------------

### Run react-admin example applications

Source: https://github.com/marmelab/react-admin/blob/master/docs/Contributing.md

Installs dependencies, builds project packages, and launches example apps (simple, demo, CRM, tutorial) against mock REST APIs.

```sh
# At the react-admin project root
make install
# or
yarn install

# Run the simple application
make run-simple

# Run the e-commerce demo application
make build
make run-demo

# Run the CRM application
make build
make run-crm

# Run the tutorial application
make build
make run-tutorial
```

--------------------------------

### Start TanStack Start development server

Source: https://github.com/marmelab/react-admin/blob/master/docs/TanStackStart.md

Starts the development server using npm or yarn to render the admin interface at `/admin`.

```bash
npm run dev
# or
yarn dev
```

--------------------------------

### Install and Configure simpleRestProvider in Admin

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataProviders.md

Install ra-data-simple-rest and initialize it with your API endpoint before passing it to the <Admin> dataProvider prop.

```sh
yarn add ra-data-simple-rest
```

```jsx
// in src/App.js
import * as React from "react";
import { Admin, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';

import { PostList } from './posts';

const dataProvider = simpleRestProvider('http://path.to.my.api/');

const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="posts" list={PostList} />
    </Admin>
);

export default App;
```

--------------------------------

### Start the development server

Source: https://github.com/marmelab/react-admin/blob/master/docs/CreateReactAdmin.md

Navigate to the newly created project folder and run the local development server.

```sh
cd your-admin-name
npm run dev
```

--------------------------------

### Start development server

Source: https://github.com/marmelab/react-admin/blob/master/docs/Tutorial.md

Navigate into the created project directory and launch the local Vite development server.

```sh
cd test-admin
npm run dev
# or
yarn dev
```

--------------------------------

### Create a new TanStack Start project

Source: https://github.com/marmelab/react-admin/blob/master/docs/TanStackStart.md

Initializes a new TanStack Start application with interactive prompts for project name, toolchain, deployment adapter, and add-ons.

```bash
npm create @tanstack/start@latest
# or
yarn create @tanstack/start
```

--------------------------------

### Install react-admin and ra-data-json-server

Source: https://github.com/marmelab/react-admin/blob/master/docs/Vite.md

Installs the core react-admin package along with ra-data-json-server to interface with JSONPlaceholder.

```sh
cd my-admin
yarn add react-admin ra-data-json-server
```

--------------------------------

### Install react-admin with npm or yarn

Source: https://github.com/marmelab/react-admin/blob/master/docs/Readme.md

Install react-admin using either npm or yarn package manager.

```sh
npm install react-admin
# or
yarn add react-admin
```

--------------------------------

### Install @react-admin/ra-json-schema-form

Source: https://github.com/marmelab/react-admin/blob/master/docs/JsonSchemaForm.md

Installs the `@react-admin/ra-json-schema-form` package using npm or yarn.

```sh
npm install --save @react-admin/ra-json-schema-form
# or
yarn add @react-admin/ra-json-schema-form
```

--------------------------------

### Install React-Admin and Data Provider

Source: https://github.com/marmelab/react-admin/blob/master/docs/NextJs.md

Installs react-admin alongside ra-data-json-server for connecting to a JSONPlaceholder test API.

```bash
cd next-admin
npm install react-admin ra-data-json-server
```

--------------------------------

### Install react-admin, ra-router-tanstack, and ra-data-json-server

Source: https://github.com/marmelab/react-admin/blob/master/docs/TanStackStart.md

Navigates into the project directory and installs the core React-Admin package, TanStack Router adapter, and JSONPlaceholder data provider.

```bash
cd tanstack-admin
npm install react-admin ra-router-tanstack ra-data-json-server
# or
yarn add react-admin ra-router-tanstack ra-data-json-server
```

--------------------------------

### Install ag-grid-enterprise package

Source: https://github.com/marmelab/react-admin/blob/master/docs/DatagridAG.md

Install the AG Grid Enterprise package using npm before registering enterprise modules in DatagridAG.

```bash
npm install ag-grid-enterprise
```

--------------------------------

### Install ra-input-rich-text package

Source: https://github.com/marmelab/react-admin/blob/master/docs/RichTextInput.md

Install the ra-input-rich-text package using npm or yarn before using RichTextInput.

```sh
npm install ra-input-rich-text
# or
yarn add ra-input-rich-text
```

--------------------------------

### List available TanStack Start add-ons with --list-add-ons

Source: https://github.com/marmelab/react-admin/blob/master/docs/TanStackStart.md

Displays the current list of supported project add-ons prior to project creation.

```bash
npm create @tanstack/start@latest --list-add-ons
# or
yarn create @tanstack/start --list-add-ons
```

--------------------------------

### Install @react-admin/ra-history

Source: https://github.com/marmelab/react-admin/blob/master/docs/RevisionsButton.md

Install the private Enterprise Edition package using npm or yarn.

```sh
npm install --save @react-admin/ra-history
# or
yarn add @react-admin/ra-history
```

--------------------------------

### Install react-admin and ra-data-json-server

Source: https://github.com/marmelab/react-admin/blob/master/docs/CreateReactApp.md

Run this command inside the project directory to add the react-admin package and a data provider. This example uses ra-data-json-server to connect to a test API provided by JSONPlaceholder.

```sh
cd my-admin
yarn add react-admin ra-data-json-server
```

--------------------------------

### Install @react-admin/ra-datagrid-ag

Source: https://github.com/marmelab/react-admin/blob/master/docs/DatagridAG.md

Install the package using npm or yarn. Access requires an active React-Admin Enterprise Edition subscription.

```sh
npm install --save @react-admin/ra-datagrid-ag
# or
yarn add @react-admin/ra-datagrid-ag
```

--------------------------------

### Install react-admin and data provider

Source: https://github.com/marmelab/react-admin/blob/master/docs/Remix.md

Installs react-admin and the ra-data-json-server package inside the Remix project directory.

```sh
cd remix-admin
npm add react-admin ra-data-json-server
```

--------------------------------

### Basic <Admin> Setup with Data Provider and Resource

Source: https://github.com/marmelab/react-admin/blob/master/docs/Admin.md

Minimal configuration for <Admin> requiring only a dataProvider prop and at least one child <Resource> component.

```tsx
// in src/App.js
import { Admin, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';

import { PostList } from './posts';

const App = () => (
    <Admin dataProvider={simpleRestProvider('http://path.to.my.api')}>
        <Resource name="posts" list={PostList} />
    </Admin>
);

export default App;
```

--------------------------------

### Install @raphiniert/ra-data-postgrest adapter

Source: https://github.com/marmelab/react-admin/blob/master/docs/NextJs.md

Installs the PostgREST data provider package required to connect react-admin to Supabase endpoints.

```sh
npm install @raphiniert/ra-data-postgrest
# or
yarn add @raphiniert/ra-data-postgrest
```

--------------------------------

### Install and configure Vitest for browser unit testing

Source: https://github.com/marmelab/react-admin/blob/master/docs/Vite.md

Install Vitest, the browser testing package, and Playwright, then configure browser testing in vite.config.ts.

```sh
yarn add -D vitest @vitest/browser playwright
```

```diff
// in vite.config.ts

+/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
+ test: {
+   browser: {
+     enabled: true,
+     provider: "playwright",
+     instances: [
+       {
+         browser: "chromium",
+       },
+     ],
+   },
+   globals: true,
+ },
});
```

--------------------------------

### DataProvider filter format example

Source: https://github.com/marmelab/react-admin/blob/master/docs/DatagridAG.md

Shows an example of key/value filters formatted by a data provider and their corresponding transformation into AG Grid filter model format.

```js
{
    athlete_eq: 'mich',
    age_lt: '30',
    country_q: 'fr',
}
```

```js
{
    athlete: {
        filterType: 'text',
        type: 'equals',
        filter: 'mich',
    },
    age: {
        filterType: 'text',
        type: 'lessThan',
        filter: '30',
    },
    country: {
        filterType: 'text',
        type: 'contains',
        filter: 'fr',
    },
}
```

--------------------------------

### Configuring notify with various options

Source: https://github.com/marmelab/react-admin/blob/master/docs/useNotify.md

Examples showing how to trigger error notifications, warnings, localized messages with arguments, and undoable notifications.

```js
// notify an error
notify(`This is an error`, { type: 'error' });
// notify a warning
notify(`This is a warning`, { type: 'warning' });
// pass translation arguments
notify('item.created', { type: 'info', messageArgs: { resource: 'post' } });
// send an undoable notification
notify('Element updated', { type: 'info', undoable: true });
```

--------------------------------

### Installing @react-admin/ra-editable-datagrid

Source: https://github.com/marmelab/react-admin/blob/master/docs/EditableDatagrid.md

Install the @react-admin/ra-editable-datagrid package using npm or yarn. Access requires a subscription to the React-Admin Enterprise Edition private npm registry.

```sh
npm install --save @react-admin/ra-editable-datagrid
# or
yarn add @react-admin/ra-editable-datagrid
```

--------------------------------

### Example Record Structure for ReferenceInput

Source: https://github.com/marmelab/react-admin/blob/master/docs/ReferenceInput.md

Example record showing a foreign key field passed into ReferenceInput.

```javascript
{
    id: 123,
    first_name: 'John',
    last_name: 'Doe',
    company_id: 456
}
```

--------------------------------

### Install @react-admin/ra-form-layout package

Source: https://github.com/marmelab/react-admin/blob/master/docs/CreateInDialogButton.md

Install the enterprise package using npm or yarn. Access requires a subscription to React Admin Enterprise Edition.

```sh
npm install --save @react-admin/ra-form-layout
# or
yarn add @react-admin/ra-form-layout
```

--------------------------------

### Install TanStack Router integration packages

Source: https://github.com/marmelab/react-admin/blob/master/docs/TanStackRouter.md

Install ra-router-tanstack along with @tanstack/react-router and @tanstack/history using npm or yarn.

```bash
npm install ra-router-tanstack @tanstack/react-router @tanstack/history
# or
yarn add ra-router-tanstack @tanstack/react-router @tanstack/history
```

--------------------------------

### Bootstrap a react-admin application using npx

Source: https://github.com/marmelab/react-admin/blob/master/docs/CreateReactAdmin.md

Creates an empty react-admin application in the specified directory using Vite.js and installs dependencies.

```sh
npx create-react-admin@latest your-admin-name
```

--------------------------------

### Install and configure FullCalendar plugins

Source: https://github.com/marmelab/react-admin/blob/master/docs/Calendar.md

Install additional FullCalendar plugins such as `@fullcalendar/rrule` and pass them alongside default plugins via the `plugins` prop.

```sh
npm install --save @fullcalendar/rrule
# or
yarn add @fullcalendar/rrule
```

```tsx
import { List } from 'react-admin';
import { Calendar } from '@react-admin/ra-calendar';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import rrulePlugin from '@fullcalendar/rrule';

const EventList = () => (
    <List perPage={1000} pagination={false}>
        <Calendar plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin, rrulePlugin ]} />
    </List>
);
```

--------------------------------

### Configuring <Admin> with Providers, Themes, Layout, and Routes

Source: https://github.com/marmelab/react-admin/blob/master/docs/Admin.md

Demonstrates a comprehensive <Admin> setup defining auth, i18n, custom layout, themes, dashboard, login page, multiple resources, and custom routes.

```tsx
// in src/App.js
import { Admin, Resource, CustomRoutes } from 'react-admin';
import { Route } from "react-router-dom";

import { dataProvider, authProvider, i18nProvider } from './providers';
import { Layout } from './layout';
import { Dashboard } from './dashboard';
import { Login } from './login';
import { lightTheme, darkTheme } from './themes';
import { CustomerList, CustomerEdit } from './customers';
import { OrderList, OrderEdit } from './orders';
import { InvoiceList, InvoiceEdit } from './invoices';
import { ProductList, ProductEdit, ProductCreate } from './products';
import { CategoryList, CategoryEdit, CategoryCreate } from './categories';
import { ReviewList } from './reviews';
import { Segments } from './segments';

const App = () => (
    <Admin
        dataProvider={dataProvider}
        authProvider={authProvider}
        i18nProvider={i18nProvider}
        layout={Layout}
        dashboard={Dashboard}
        loginPage={Login}
        theme={lightTheme}
        darkTheme={darkTheme}
        defaultTheme="light"
    >
        <Resource name="customers" list={CustomerList} edit={CustomerEdit} />
        <Resource name="orders" list={OrderList} edit={OrderEdit} options={{ label: 'Orders' }} />
        <Resource name="invoices" list={InvoiceList} edit={InvoiceEdit} />
        <Resource name="products" list={ProductList} edit={ProductEdit} create={ProductCreate} />
        <Resource name="categories" list={CategoryList} edit={CategoryEdit} create={CategoryCreate} />
        <Resource name="reviews" list={ReviewList} />
        <CustomRoutes>
            <Route path="/segments" element={<Segments />} />
        </CustomRoutes>
    </Admin>
);
```

--------------------------------

### Install @react-admin/ra-search

Source: https://github.com/marmelab/react-admin/blob/master/docs/Search.md

Installs the `@react-admin/ra-search` package using Yarn. Requires a valid React-admin Enterprise Edition subscription.

```sh
yarn add '@react-admin/ra-search'
```

--------------------------------

### Install React-Admin i18n Agent Skill

Source: https://github.com/marmelab/react-admin/blob/master/docs/Translation.md

Installs the specialized react-admin translation agent skill into your repository using the skills CLI.

```bash
npx skills add marmelab/react-admin --skill i18n
```

--------------------------------

### Install packages for offline support

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataProviders.md

Installs TanStack React Query persistence packages required for offline and local-first react-admin applications.

```sh
yarn add @tanstack/react-query-persist-client @tanstack/query-async-storage-persister
```

--------------------------------

### Install react-admin via npm or yarn

Source: https://github.com/marmelab/react-admin/blob/master/README.md

Install the react-admin package and its required dependencies using either npm or yarn package manager.

```sh
npm install react-admin
#or
yarn add react-admin
```

--------------------------------

### Specify the package manager with --install

Source: https://github.com/marmelab/react-admin/blob/master/docs/CreateReactAdmin.md

Sets the package manager used to install application dependencies, with support for npm, yarn, bun, pnpm, or skip/none.

```sh
npx create-react-admin@latest your-admin-name --install bun
```

--------------------------------

### Create a New React Router Project

Source: https://github.com/marmelab/react-admin/blob/master/docs/ReactRouterFramework.md

Initializes a new React Router project targeting React Router v7 in Framework mode. Prompts will ask for project name, git initialization, and npm dependency installation.

```sh
npx create-react-router@latest 

```

--------------------------------

### Installing @mui/x-date-pickers-pro package

Source: https://github.com/marmelab/react-admin/blob/master/docs/DateRangeInput.md

Install the required Material UI X Pro date pickers dependency using npm or yarn. Requires a MUI X Pro license.

```sh
npm install --save @mui/x-date-pickers-pro
# or
yarn add @mui/x-date-pickers-pro
```

--------------------------------

### Sample record data structure

Source: https://github.com/marmelab/react-admin/blob/master/docs/RecordField.md

Example record object containing flat and nested properties used to demonstrate field path targeting.

```json
{
    "id": 123,
    "title": "My post",
    "author": {
        "name": "John Doe"
    }
}
```

--------------------------------

### Example user permissions structure with authProvider.getPermissions

Source: https://github.com/marmelab/react-admin/blob/master/docs/IfCanAccess.md

Shows the permissions structure returned by authProvider.getPermissions that determines which IfCanAccess actions are permitted for a resource.

```jsx
console.log(await authProvider.getPermissions())
// [
//     { action: ["create", "edit"], resource: "companies" },
//     ...
// ];
```

--------------------------------

### Bootstrap with alternative package managers

Source: https://github.com/marmelab/react-admin/blob/master/docs/CreateReactAdmin.md

Demonstrates initializing a react-admin project with npx, npm, yarn, or bun.

```sh
# Using npx
npx create-react-admin@latest your-admin-name
# Using npm
npm create react-admin@latest your-admin-name
# Using yarn
yarn create react-admin your-admin-name
# Using bun
bun create react-admin@latest your-admin-name
```

--------------------------------

### useUpdateMany Usage Examples

Source: https://github.com/marmelab/react-admin/blob/master/docs/useUpdateMany.md

Two examples showing how to use useUpdateMany: one passing parameters when calling the hook, and one passing parameters when calling the updateMany callback. Both use useListContext to get selectedIds.

```jsx
// set params when calling the hook
import { useUpdateMany, useListContext } from 'react-admin';

const BulkResetViewsButton = () => {
    const { selectedIds } = useListContext();
    const [updateMany, { isPending, error }] = useUpdateMany(
        'posts',
        { ids: selectedIds, data: { views: 0 } }
    );
    const handleClick = () => {
        updateMany();
    }
    if (error) { return <p>ERROR</p>; }
    return <button disabled={isPending} onClick={handleClick}>Reset views</button>;
};

// set params when calling the updateMany callback
import { useUpdateMany, useListContext } from 'react-admin';

const BulkResetViewsButton = () => {
    const { selectedIds } = useListContext();
    const [updateMany, { isPending, error }] = useUpdateMany();
    const handleClick = () => {
        updateMany(
            'posts',
            { ids: selectedIds, data: { views: 0 } }
        );
    }
    if (error) { return <p>ERROR</p>; }
    return <button disabled={isPending} onClick={handleClick}>Reset views</button>;
};
```

--------------------------------

### ReferenceField aggregated API query

Source: https://github.com/marmelab/react-admin/blob/master/docs/Features.md

Example GET request sent by ReferenceField to aggregate calls for multiple related IDs into a single request.

```http
GET https://my.api.url/authors?filter={ids:[1,2,3,4,5,6,7]}
```

--------------------------------

### Example record containing a reference property

Source: https://github.com/marmelab/react-admin/blob/master/docs/ReferenceInput.md

Demonstrates a sample record where company_id serves as the reference key pointing to another entity.

```javascript
{
    id: 456,
    firstName: "John",
    lastName: "Doe",
    company_id: 12,
}
```

--------------------------------

### Install react-admin and Dependencies in React Router

Source: https://github.com/marmelab/react-admin/blob/master/docs/ReactRouterFramework.md

Installs react-admin, ra-data-json-server, and react-router-dom into the project directory. Ensure react-router-dom uses the exact same version as the installed React Router package.

```sh
cd react-router-admin
npm add react-admin ra-data-json-server react-router-dom@7.10.1
```

--------------------------------

### Set up a basic react-admin application with Admin and Resource

Source: https://github.com/marmelab/react-admin/blob/master/docs/Readme.md

Sets up an admin panel configured with simpleRestProvider and a posts Resource using ListGuesser and EditGuesser. Automatically connects to http://localhost:3000/posts and creates default routes for /posts and /posts/:id.

```jsx
import * as React from "react";
import { createRoot } from "react-dom/client";
import { Admin, Resource, ListGuesser, EditGuesser } from "react-admin";
import simpleRestProvider from "ra-data-simple-rest";

const root = createRoot(document.getElementById("root"));
root.render(
  <Admin dataProvider={simpleRestProvider("http://localhost:3000")}>
    <Resource name="posts" list={ListGuesser} edit={EditGuesser} />
  </Admin>
);
```

--------------------------------

### Declare resources in Admin component

Source: https://github.com/marmelab/react-admin/blob/master/docs/Breadcrumb.md

Example admin configuration declaring posts, comments, and tags resources.

```jsx
const App = () => (
    <Admin dataProvider={dataProvider} layout={MyLayout}>
        <Resource name="posts" list={PostList} />
        <Resource name="comments" list={CommentList} />
        <Resource name="tags" list={TagList} />
    </Admin>
);
```

--------------------------------

### Calling useGetOne with Resource and Query Parameters

Source: https://github.com/marmelab/react-admin/blob/master/docs/Actions.md

Illustrates the basic signature and return value of useGetOne, which executes on mount and calls dataProvider.getOne.

```jsx
const { isPending, error, data } = useGetOne(resource, { id });
// calls dataProvider.getOne(resource, { id })
```

--------------------------------

### Serve Documentation Locally with make doc

Source: https://github.com/marmelab/react-admin/blob/master/README.md

Builds and serves the documentation locally using Jekyll. Access the site at http://localhost:4000/ after running.

```sh
make doc
```

--------------------------------

### Examine the generated dist directory structure

Source: https://github.com/marmelab/react-admin/blob/master/docs/Deploy.md

Shows the static assets and index.html entry point created by the build command.

```tree
dist/
  ├ assets/
  │  └ index-F74jyUxd.js
  ├ favicon.ico
  ├ index.html
  └ manifest.json
```

--------------------------------

### Install ra-data-postgrest Package

Source: https://github.com/marmelab/react-admin/blob/master/docs/ReactRouterFramework.md

Installs the PostgREST data provider package used to communicate with Supabase endpoints.

```sh
npm add @raphiniert/ra-data-postgrest
```

--------------------------------

### Building a Custom Layout with Material UI and React-Admin

Source: https://github.com/marmelab/react-admin/blob/master/docs/Layout.md

A simplified custom layout starting point modeled after the default layout, assembling AppBar, Sidebar, and Menu components.

```jsx
// in src/MyLayout.js
import { Box } from '@mui/material';
import { AppBar, Menu, Sidebar } from 'react-admin';

const MyLayout = ({ children }) => (
    <Box
        sx={{
            display: "flex",
            flexDirection: "column",
            zIndex: 1,
            minHeight: "100vh",
            backgroundColor: "theme.palette.background.default",
            position: "relative"
        }}
    >
        <Box
            overflowX="auto"
            sx={{ display: "flex", flexDirection: "column" }}
        >
            <AppBar />
            <Box sx={{ display: "flex", flexGrow: 1 }}>
                <Sidebar>
                    <Menu />
                </Sidebar>
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: "column",
                        flexGrow: 2,
                        p: 3,
                        marginTop: "4em",
                        paddingLeft: 5
                    }}
                >
                    {children}
                </Box>
            </Box>
        </Box>
    </Box>
);

export default MyLayout;
```

--------------------------------

### Creating and Registering a Show View with <Show>

Source: https://github.com/marmelab/react-admin/blob/master/docs/Show.md

Define a record show view using `<Show>` and `<SimpleShowLayout>`, then assign the component to the `show` prop of a `<Resource>`.

```jsx
// in src/posts.jsx
import { Show, SimpleShowLayout, TextField, DateField, RichTextField } from 'react-admin';

export const PostShow = () => (
    <Show>
        <SimpleShowLayout>
            <TextField source="title" />
            <TextField source="teaser" />
            <RichTextField source="body" />
            <DateField label="Publication date" source="published_at" />
        </SimpleShowLayout>
    </Show>
);
```

```jsx
// in src/App.jsx
import { Admin, Resource } from 'react-admin';

import { dataProvider } from './dataProvider';
import { PostShow } from './posts';

const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="posts" show={PostShow} />
    </Admin>
);
```

--------------------------------

### Bootstrap project with create-react-admin

Source: https://github.com/marmelab/react-admin/blob/master/docs/Tutorial.md

Run the create-react-admin command with the interactive flag to set up a new React-admin application.

```sh
npm create react-admin@latest test-admin -- --interactive
# or
yarn create react-admin test-admin --interactive
```

--------------------------------

### Preview documentation using Docker

Source: https://github.com/marmelab/react-admin/blob/master/docs/Contributing.md

Builds and serves the Jekyll markdown documentation locally. Access the documentation at http://localhost:4000/documentation.html.

```sh
make docker-doc
```

--------------------------------

### Create a Show View with Show and SimpleShowLayout

Source: https://github.com/marmelab/react-admin/blob/master/docs/ShowTutorial.md

Standard react-admin Show view implementation expressing resource fields concisely using `<Show>` and `<SimpleShowLayout>`.

```jsx
import { Show, SimpleShowLayout, TextField, DateField } from 'react-admin';

const BookShow = () => (
    <Show>
        <SimpleShowLayout>
            <TextField label="Title" source="title" />
            <DateField label="Publication Date" source="published_at" />
        </SimpleShowLayout>
    </Show>
);
```

--------------------------------

### Install @react-admin/ra-soft-delete package

Source: https://github.com/marmelab/react-admin/blob/master/docs/SoftDeleteDataProvider.md

Install the ra-soft-delete package via npm or yarn. Requires an active Enterprise Edition license.

```bash
npm install --save @react-admin/ra-soft-delete
# or
yarn add @react-admin/ra-soft-delete
```

--------------------------------

### Initialize resources with --resource

Source: https://github.com/marmelab/react-admin/blob/master/docs/CreateReactAdmin.md

Generates CRUD pages initialized with guessers for specified resources. Note that --resource is incompatible with --data-provider supabase.

```sh
npx create-react-admin@latest your-admin-name --resource posts --resource comments
```

--------------------------------

### Logging query completion with onSettled in useGetOne

Source: https://github.com/marmelab/react-admin/blob/master/docs/Actions.md

Log all dataProvider calls or perform cleanup regardless of whether the query succeeded or failed.

```jsx
import { useGetOne, useRecordContext } from 'react-admin';

const UserProfile = () => {
    const record = useRecordContext();
    const { data, isPending, error } = useGetOne(
        'users',
        { id: record.id },
        { onSettled: (data, error) => console.log(data, error) }
    );
    if (isPending) { return <Loading />; }
    if (error) { return <p>ERROR</p>; }
    return <div>User {data.username}</div>;
};
```

--------------------------------

### Create a new Remix project

Source: https://github.com/marmelab/react-admin/blob/master/docs/Remix.md

Initializes a new Remix project using the create-remix CLI tool.

```sh
npx create-remix@latest
```

--------------------------------

### Creating a Show View with <Show> and <SimpleShowLayout>

Source: https://github.com/marmelab/react-admin/blob/master/docs/CRUD.md

Reads the record ID from the URL, fetches the record from the data provider, and displays its fields using `<SimpleShowLayout>` and `<TextField>`.

```jsx
import { Show, SimpleShowLayout, TextField} from 'react-admin';

const BookShow = () => (
    <Show>
        <SimpleShowLayout>
            <TextField source="id" />
            <TextField source="title" />
            <TextField source="author" />
            <TextField source="year" />
        </SimpleShowLayout>
    </Show>
);
```

--------------------------------

### Configuring TreeWithDetails with CreateNode and EditNode

Source: https://github.com/marmelab/react-admin/blob/master/docs/TreeWithDetails.md

Demonstrates how to define create, edit, and list views for tree structures using TreeWithDetails, CreateNode, and EditNode from @react-admin/ra-tree.

```jsx
// in src/category.js
import {
    Admin,
    Resource,
    Create,
    Edit,
    SimpleForm,
    TextInput,
} from 'react-admin';
import {
    CreateNode,
    EditNode,
    EditNodeToolbar,
    TreeWithDetails,
} from '@react-admin/ra-tree';

// a Create view for a tree uses <CreateNode> instead of the standard <Create>
const CategoriesCreate = () => (
    <CreateNode>
        <SimpleForm>
            <TextInput source="name" />
        </SimpleForm>
    </CreateNode>
);

// an Edit view for a tree uses <EditNode> instead of the standard <Edit>
const CategoriesEdit = () => (
    <EditNode>
        <SimpleForm toolbar={<EditNodeToolbar />}>
            <TextInput source="title" />
        </SimpleForm>
    </EditNode>
);

// a List view for a tree uses <TreeWithDetails>
export const CategoriesList = () => (
    <TreeWithDetails create={CategoriesCreate} edit={CategoriesEdit} />
);

// in src/App.js
import { CategoriesList } from './category';

const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource list={CategoriesList} />
    </Admin>
);
```

--------------------------------

### useGetOne Syntax and Return Values

Source: https://github.com/marmelab/react-admin/blob/master/docs/useGetOne.md

Shows the signature for useGetOne, accepting a resource name, an object with id and optional meta parameters, and optional react-query options.

```jsx
const { data, isPending, error, refetch } = useGetOne(
    resource,
    { id, meta },
    options
);
```

--------------------------------

### Fetching a User Record on Mount with useGetOne

Source: https://github.com/marmelab/react-admin/blob/master/docs/Actions.md

Demonstrates fetching user data in a React component using useGetOne and handling isPending and error states.

```jsx
import { useGetOne } from 'react-admin';
import { Loading, Error } from './MyComponents';

const UserProfile = ({ userId }) => {
    const { isPending, error, data: user } = useGetOne('users', { id: userId });

    if (isPending) return <Loading />;
    if (error) return <Error />;
    if (!user) return null;

    return (
        <ul>
            <li>Name: {user.name}</li>
            <li>Email: {user.email}</li>
        </ul>
    )
};
```

--------------------------------

### Install @react-admin/ra-realtime package

Source: https://github.com/marmelab/react-admin/blob/master/docs/Realtime.md

Install the package using npm or yarn. This package is part of React-Admin Enterprise Edition and requires access to its private registry.

```sh
npm install --save @react-admin/ra-realtime
# or
yarn add @react-admin/ra-realtime
```

--------------------------------

### Create an Admin interface with Resource and CRUD views in app.js and posts.js

Source: https://github.com/marmelab/react-admin/blob/master/README.md

Configure the core Admin component with a REST data provider in app.js and define corresponding List, Edit, and Create components in posts.js.

```jsx
// in app.js
import * as React from "react";
import { createRoot } from 'react-dom/client';
import { Admin, Resource } from 'react-admin';
import restProvider from 'ra-data-simple-rest';

import { PostList, PostEdit, PostCreate, PostIcon } from './posts';

createRoot(document.getElementById('root')!).render(
    <Admin dataProvider={restProvider('http://localhost:3000')}>
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
    </Admin>
);
```

```jsx
// in posts.js
import * as React from "react";
import { List, DataTable, Edit, Create, SimpleForm, DateField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
import BookIcon from '@mui/icons-material/Book';
export const PostIcon = BookIcon;

export const PostList = () => (
    <List>
        <DataTable>
            <DataTable.Col source="id" />
            <DataTable.Col source="title" />
            <DataTable.Col source="published_at" field={DateField} />
            <DataTable.Col source="average_note" />
            <DataTable.Col source="views" />
            <DataTable.Col>
                <EditButton />
            </DataTable.Col>
        </DataTable>
    </List>
);

const PostTitle = () => {
    const record = useRecordContext();
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};

export const PostEdit = () => (
    <Edit title={<PostTitle />}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <DateInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
            <TextInput disabled label="Nb views" source="views" />
        </SimpleForm>
    </Edit>
);

export const PostCreate = () => (
    <Create title="Create a Post">
        <SimpleForm>
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <TextInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
        </SimpleForm>
    </Create>
);
```

--------------------------------

### Create a Vite React JavaScript project

Source: https://github.com/marmelab/react-admin/blob/master/docs/Vite.md

Initializes a new Vite project using the plain JavaScript React template.

```sh
yarn create vite my-admin --template react
```

--------------------------------

### Install @react-admin/ra-rbac with npm or yarn

Source: https://github.com/marmelab/react-admin/blob/master/docs/AuthRBAC.md

Install the @react-admin/ra-rbac package using npm or yarn. Requires an Enterprise Edition subscription and access to the private npm registry.

```bash
npm install --save @react-admin/ra-rbac
# or
yarn add @react-admin/ra-rbac
```

--------------------------------

### useInfiniteGetList(resource, query)

Source: https://github.com/marmelab/react-admin/blob/master/docs/useInfiniteGetList.md

Calls the dataProvider.getList() method iteratively for infinite scrolling or load-more pagination. Accepts the resource name and query configuration object, returning the accumulated pages along with loading and pagination states.

```APIDOC
## useInfiniteGetList

### Description
A React hook that fetches a paginated list of records and supports infinite pagination workflows (such as "load more" buttons or infinite scroll).

### Syntax
```javascript
const {
    data,
    total,
    isPending,
    error,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
} = useInfiniteGetList(resource, query);
```

### Parameters

- **resource** (`string`) - Required. The name of the resource to fetch (e.g., `'posts'`).
- **query** (`object`) - Optional. Query parameters passed to `dataProvider.getList()`.
  - **pagination** (`object`) - Optional.
    - **page** (`number`) - The initial page number.
    - **perPage** (`number`) - The number of records returned in each page.
  - **sort** (`object`) - Optional.
    - **field** (`string`) - Field name to sort by.
    - **order** (`string`) - Sort direction (e.g., `'ASC'`, `'DESC'`).
  - **filter** (`object`) - Optional. Filter parameters.
  - **meta** (`object`) - Optional. Custom metadata to pass to the data provider (e.g., `{ _embed: ['author', 'tags'] }`).

### Return Value

Returns an object containing the following properties:

- **data** (`object`) - Object containing `pages`, where each page has a `data` array of records.
- **total** (`number`) - Total number of records available across all pages.
- **isPending** (`boolean`) - Indicates whether the initial query is loading.
- **error** (`Error|null`) - Error object if the query failed.
- **hasNextPage** (`boolean`) - Indicates whether more pages are available to fetch.
- **isFetchingNextPage** (`boolean`) - Indicates whether the next page is currently being loaded.
- **fetchNextPage** (`function`) - Function to trigger fetching the next page of records.

### Usage Example

```jsx
import { useInfiniteGetList } from 'react-admin';

const LatestNews = () => {
    const { 
        data,
        total,
        isPending,
        error,
        hasNextPage,
        isFetchingNextPage,
        fetchNextPage,
    } = useInfiniteGetList(
        'posts',
        {
            pagination: { page: 1, perPage: 10 },
            sort: { field: 'published_at', order: 'DESC' },
            meta: { _embed: ['author', 'tags'] }
        }
    );
    
    if (isPending) { return <p>Loading</p>; }
    if (error) { return <p>ERROR</p>; }

    return (
       <>
           <ul>
               {data?.pages.map(page => 
                    page.data.map(post => 
                        <li key={post.id}>{post.title}</li>
                    )
                )}
           </ul>
           {hasNextPage &&
               <button disabled={isFetchingNextPage} onClick={() => fetchNextPage()}>
                   Next page
               </button>
            }
       </>
   );
};
```
```

--------------------------------

### Replace App.tsx to use the admin component

Source: https://github.com/marmelab/react-admin/blob/master/docs/CreateReactApp.md

Replace the App.tsx component with this code to render the admin app. Then start the server with yarn start and browse to http://localhost:3000/ to see the working admin.

```jsx
import MyAdmin from "./admin";

const App = () => <MyAdmin />;

export default App;
```

--------------------------------

### GraphQL create Mutation

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataProviderWriting.md

Example GraphQL mutation structure for inserting a single record.

```graphql
mutation {
    insert_posts_one(objects: { title: "hello, world!", author_id: 12 }) {
        id
        title
        body
        author_id
        created_at
    }
}
```

--------------------------------

### Fetch input suggestions with dataProvider.getList

Source: https://github.com/marmelab/react-admin/blob/master/docs/ReferenceManyToManyInput.md

Executed to retrieve paginated suggestions of the reference resource for selection in the input component.

```javascript
dataProvider.getList('venues', {
    sort: { field: 'id', order: 'DESC' },
    pagination: { page: 1, perPage: 25 },
    filter: {},
});
```

```json
{
    "data": [
        { "id": 732, "name": "Madison Square Garden" },
        { "id": 874, "name": "Yankee Stadium" }
        { "id": 874, "name": "Barclays Center" }
        ...
    ],
    "total": 32
}
```

--------------------------------

### Define RPC endpoint path

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataFetchingGuide.md

Example non-CRUD REST endpoint for banning a user by ID.

```http
POST /api/user/123/ban
```

--------------------------------

### Create and register a custom AppBar in Layout and Admin

Source: https://github.com/marmelab/react-admin/blob/master/docs/AppBar.md

Demonstrates how to define a custom AppBar with custom props, supply it to a custom Layout component, and pass that layout to the Admin component.

```jsx
// in src/MyAppBar.js
import { AppBar } from 'react-admin';
import { Typography } from '@mui/material';

const MyAppBar = () => <AppBar color="primary" position="sticky" />;
```

```jsx
// in src/MyLayout.js
import { Layout } from 'react-admin';
import { MyAppBar } from './MyAppBar';

export const MyLayout = ({ children }) => (
    <Layout appBar={MyAppBar}>
        {children}
    </Layout>
);
```

```jsx
// in src/App.js
import { MyLayout } from './MyLayout';

const App = () => (
    <Admin layout={MyLayout} dataProvider={...}>
        // ...
    </Admin>
);
```

--------------------------------

### Prompting AI Agents with Context7 Documentation

Source: https://github.com/marmelab/react-admin/blob/master/docs/CodingAgents.md

Reference Context7 and `/marmelab/react-admin` directly in prompts to give the AI agent direct access to official react-admin documentation.

```txt
Add a form field to edit the author of the post.
use context7 with /marmelab/react-admin
```

--------------------------------

### Example record with array of objects

Source: https://github.com/marmelab/react-admin/blob/master/docs/AutocompleteArrayInput.md

A record where the tags field contains an array of objects, each with an id property.

```json
{
  "id": 123,
  "tags": [
      { "id": "lifestyle" },
      { "id": "photography" }
   ] 
}
```

--------------------------------

### GraphQL delete Mutation

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataProviderWriting.md

Example GraphQL mutation structure for deleting a single record by primary key.

```graphql
mutation {
    delete_posts_by_pk(id: 123) {
        id
        title
        body
        author_id
        created_at
    }
}
```

--------------------------------

### GraphQL updateMany Mutation

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataProviderWriting.md

Example GraphQL mutation structure for updating multiple records matching a condition.

```graphql
mutation {
    update_posts(where: { id: { _in: [123, 124, 125] } }, _set: { title: "hello, world!" }) {
        affected_rows
    }
}
```

--------------------------------

### Initialize Admin with PostgREST Data Provider in app/routes/admin.tsx

Source: https://github.com/marmelab/react-admin/blob/master/docs/ReactRouterFramework.md

Sets up the Admin component to use postgrestRestProvider pointing to the local proxy route at /admin/api.

```jsx
// in app/routes/admin.tsx
import { Admin, Resource, ListGuesser, fetchUtils } from "react-admin";
import postgrestRestProvider, { defaultPrimaryKeys, defaultSchema } from '@raphiniert/ra-data-postgrest';

const dataProvider = postgrestRestProvider({
    apiUrl: '/admin/api',
    httpClient: fetchUtils.fetchJson,
    defaultListOp: 'eq',
    primaryKeys: defaultPrimaryKeys,
    schema: defaultSchema
});

export default function App() {
  return (
    <Admin basename="/admin" dataProvider={dataProvider}>
      <Resource name="posts" list={ListGuesser} />
      <Resource name="comments" list={ListGuesser} />
    </Admin>
  );
}
```

--------------------------------

### GraphQL update Mutation

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataProviderWriting.md

Example GraphQL mutation structure for updating a single record by primary key.

```graphql
mutation {
    update_posts_by_pk(pk_columns: { id: 123 }, _set: { title: "hello, world!" }) {
        id
        title
        body
        author_id
        created_at
    }
}
```

--------------------------------

### GraphQL getMany Query

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataProviderWriting.md

Example GraphQL query structure for fetching multiple records by an array of IDs.

```graphql
query {
    posts(where: { id: { _in: [123, 124, 125] } }) {
        id
        title
        body
        author_id
        created_at
    }
}
```

--------------------------------

### GraphQL getOne Query

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataProviderWriting.md

Example GraphQL query structure for retrieving a single record by primary key.

```graphql
query {
    posts_by_pk(id: 123) {
        id
        title
        body
        author_id
        created_at
    }
}
```

--------------------------------

### Publish and subscribe to real-time events with usePublish and useSubscribe

Source: https://github.com/marmelab/react-admin/blob/master/docs/Features.md

Demonstrates the core pub/sub mechanism used to broadcast events to a topic and execute callbacks on subscribers.

```jsx
// on the publisher side
const [publish] = usePublish();
publish(topic, event);

// on the subscriber side
useSubscribe(topic, callback);
```

--------------------------------

### Add helperText to MarkdownInput

Source: https://github.com/marmelab/react-admin/blob/master/docs/MarkdownInput.md

Displays explanatory text below the markdown editor to guide users on expected input.

```jsx
<SimpleForm>
    <MarkdownInput
        source="description"
        helperText="Enter a description of the post"
    />
</SimpleForm>
```

--------------------------------

### Translatable Record Data Structure Example

Source: https://github.com/marmelab/react-admin/blob/master/docs/TranslatableInputs.md

Structure translatable record fields with one value per language.

```javascript
{
    id: 1234,
    name: {
        en: 'White trousers',
        fr: 'Pantalon blanc',
    },
    description: {
        en: 'Slim fit trousers for every day use'
        fr: 'Pantalon ajusté pour un usage quotidien',
    }
}
```

--------------------------------

### GraphQL deleteMany Mutation

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataProviderWriting.md

Example GraphQL mutation structure for deleting multiple records matching an array of IDs.

```graphql
mutation {
    delete_posts(where: { id: { _in: [123, 124, 125] } }) {
        affected_rows
    }
}
```

--------------------------------

### Configure Data Provider using addAIMethodsBasedOnOpenAIAPI

Source: https://github.com/marmelab/react-admin/blob/master/docs/FormFillerButton.md

Wraps a base data provider with OpenAI completion API methods. Expects the OpenAI API key to be saved in localStorage under 'ra-ai.openai-api-key'.

```jsx
// in src/dataProvider.js
import jsonServerProvider from 'ra-data-json-server';
import { addAIMethodsBasedOnOpenAIAPI } from '@react-admin/ra-ai';

const baseDataProvider = jsonServerProvider(
    import.meta.env.VITE_JSON_SERVER_URL
);
export const dataProvider = addAIMethodsBasedOnOpenAIAPI(baseDataProvider);
```

--------------------------------

### Build the Single Page Application using npm or yarn

Source: https://github.com/marmelab/react-admin/blob/master/docs/Deploy.md

Compile the react-admin application into static distribution files located in the dist directory.

```sh
npm run build
# or
yarn build
```

--------------------------------

### GraphQL getManyReference Query

Source: https://github.com/marmelab/react-admin/blob/master/docs/DataProviderWriting.md

Example GraphQL query structure for retrieving records related by a foreign key reference.

```graphql
query {
    posts(where: { author_id: { _eq: 12 } }) {
        id
        title
        body
        author_id
        created_at
    }
}
```

--------------------------------

### Create root route link in src/routes/index.tsx

Source: https://github.com/marmelab/react-admin/blob/master/docs/TanStackStart.md

Defines the index route for the TanStack Start application with a link pointing to `/admin`.

```tsx
// in src/routes/index.tsx
import { createFileRoute, Link } from '@tanstack/react-router';

function Home() {
    return (
        <div>
            <h1>TanStack Start + React-Admin</h1>
            <p>
                Go to the admin at <Link to="/admin">/admin</Link>
            </p>
        </div>
    );
}

export const Route = createFileRoute('/')({ component: Home });
```

--------------------------------

### Structuring CRUD events for realtime updates

Source: https://github.com/marmelab/react-admin/blob/master/docs/usePublish.md

Example structure for a CRUD deletion event handled by realtime components and hooks.

```js
{
    topic: `resource/${resource}/id`,
    event: {
        type: 'deleted',
        payload: { ids: [id]},
    },
}
```

--------------------------------

### Embedded Array Data Structure in Record

Source: https://github.com/marmelab/react-admin/blob/master/docs/ArrayInput.md

Example structure of a record containing an embedded array of objects in the items field.

```javascript
{
    "id": 1,
    "date": "2022-08-30",
    "customer": "John Doe",
    "items": [
        {
            "name": "Office Jeans",
            "price": 45.99,
            "quantity": 1,
        },
        {
            "name": "Black Elegance Jeans",
            "price": 69.99,
            "quantity": 2,
        },
        {
            "name": "Slim Fit Jeans",
            "price": 55.99,
            "quantity": 1,
        },
    ],
}
```

--------------------------------

### Example Post record containing numeric field

Source: https://github.com/marmelab/react-admin/blob/master/docs/NumberInput.md

Represents an API record structure containing numeric fields like average_note.

```json
{
    "id": 123,
    "title": "Lorem Ipsum",
    "average_note": 4
}
```
Tokens:
Raw