Registry / productivity / react-admin

react-admin

JSON →
library5.14.7jsnpmunverified

A frontend framework for building admin applications on top of REST/GraphQL APIs using React, Material UI, and TypeScript. Version 5.14.7 is current stable; released regularly with semver. Key differentiators: backend-agnostic via data providers, full CRUD scaffolds, hooks for auth/routing/forms/i18n, optimistic rendering, and extensive customization. Includes built-in support for theming, accessibility, and responsive design.

npm install react-admin
INSTALL
IMPORT
SIG · REACT-ADMIN
R
react-admin
productivityjavascriptv5.14.7
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

Admin
import { Admin } from 'react-admin'
import Admin from 'react-admin'
Named export, not default.
Resource
import { Resource } from 'react-admin'
const Resource = require('react-admin').Resource
ESM-only; required imports are unsupported in recent versions.
List
import { List } from 'react-admin'
import { List } from 'ra-ui-materialui'
Components are re-exported from 'react-admin' directly since v4.
SimpleForm
import { SimpleForm } from 'react-admin'
import { SimpleForm } from 'ra-core'
Moved to main package in v5.

Minimal admin app with a single resource 'posts' using a simple REST data provider and CRUD pages.

import * as React from "react"; import { Admin, Resource, List, DataTable, Edit, Create, SimpleForm, TextInput, DateInput, EditButton, DateField, useRecordContext } from 'react-admin'; import restProvider from 'ra-data-simple-rest'; import BookIcon from '@mui/icons-material/Book'; const PostIcon = BookIcon; const PostList = () => ( <List> <DataTable> <DataTable.Col source="id" /> <DataTable.Col source="title" /> <DataTable.Col source="published_at" /> <DataTable.Col source="actions"> <EditButton /> </DataTable.Col> </DataTable> </List> ); const PostTitle = () => { const record = useRecordContext(); return <span>Post {record ? `"${record.title}"` : ''}</span>; }; const PostEdit = () => ( <Edit title={<PostTitle />}> <SimpleForm> <TextInput source="title" /> <DateInput source="published_at" /> </SimpleForm> </Edit> ); const PostCreate = () => ( <Create> <SimpleForm> <TextInput source="title" /> <DateInput source="published_at" /> </SimpleForm> </Create> ); export default function App() { return ( <Admin dataProvider={restProvider('http://localhost:3000')}> <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} /> </Admin> ); }
Debug
Known issues
breakingUpgrading from v3 to v4: Redux was replaced by react-query; state management changed entirely. Custom reducers no longer work.
fix
Migrate to react-admin v4 using the upgrade guide: https://marmelab.com/react-admin/UpgradeGuide.html
affects: >=3.0 <4.0
breakingUpgrading from v4 to v5: SimpleForm no longer includes <Toolbar> by default; you must add it explicitly if you want save/reset buttons.
fix
Add <Toolbar> component inside <SimpleForm> or set toolbar prop.
affects: >=4.0 <5.0
deprecateduseQueryWithStore is deprecated; use useGetList, useGetOne, etc. from react-query directly.
fix
Replace with data provider hooks like useGetList.
affects: >=5.0
gotchaThe <DataTable> component (introduced in v5) replaces the old <Datagrid>; using <Datagrid> in v5 still works but is legacy.
fix
Use <DataTable> for new projects; migrate existing <Datagrid> to avoid future removal.
affects: >=5.0
gotchaForms using react-hook-form require that inputs are registered under the same form context. Using multiple <SimpleForm> inside one page may cause conflicts.
fix
Ensure each form is a separate <Form> or <SimpleForm> and do not nest them.
affects: >=4.0
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'map')
Missing data provider or incorrect API response shape.
fix
Ensure dataProvider returns { data: [] } or { data: { id: 1, ... } } for list/ getList.
Module not found: Error: Can't resolve 'ra-data-simple-rest'
Optional data provider not installed.
fix
Run: npm install ra-data-simple-rest
Error: <Admin> requires a dataProvider prop
Missing required dataProvider on <Admin>.
fix
Pass a valid dataProvider object or import one.
Upgrade
Version history
5.14.7latest on npm
Audit
Dependencies
reactrequiredpeer dependency for React 18 or 19
react-domrequiredpeer dependency for rendering
Agent activity
23 hits · last 30 days
node
22
OpenAI (training)
1
Resources
react-admin — npm install react-admin · libregistry