A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design


react-admin Build Status FOSSA Status Gitpod ready-to-code

A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Previously named admin-on-rest. Open sourced and maintained by marmelab.

Home page - Documentation - Demo - Blog - Releases - Support



  • Adapts to any backend (REST, GraphQL, SOAP, etc.)
  • Powered by material-ui, redux, react-final-form, react-router and a few more
  • Super-fast UI thanks to optimistic rendering (renders before the server returns)
  • Undo updates and deletes for a few seconds
  • Relationships (many to one, one to many)
  • Data Validation
  • Internationalization (i18n)
  • Themeable, Highly customizable interface
  • Supports any authentication provider (REST API, OAuth, Basic Auth, ...)
  • Full-featured datagrid (sort, pagination, filters)
  • Large library of components for various data types: boolean, number, rich text, etc.
  • Conditional formatting
  • Filter-as-you-type
  • Supports any form layout (simple, tabbed, etc.)
  • Custom actions
  • WYSIWYG editor
  • Customize dashboard, menu, layout
  • Super easy to extend and override (it's just React components)
  • Can be included in another React app


React-admin is available from npm. You can install it (and its required dependencies) using:

npm install react-admin
yarn add react-admin


Read the Tutorial for a 30 minutes introduction. After that, head to the Documentation, or checkout the source code of the demo for an example usage.

At a Glance

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

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

    <Admin dataProvider={restProvider('http://localhost:3000')}>
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />

The <Resource> component is a configuration component that allows to define sub components for each of the admin view: list, edit, and create. These components use Material UI and custom components from react-admin:

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

export const PostList = (props) => (
    <List {...props}>
            <TextField source="id" />
            <TextField source="title" />
            <DateField source="published_at" />
            <TextField source="average_note" />
            <TextField source="views" />
            <EditButton basePath="/posts" />

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

export const PostEdit = (props) => (
    <Edit title={<PostTitle />} {...props}>
            <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" />

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

Does It Work With My API?


React-admin uses an adapter approach, with a concept called Data Providers. Existing providers can be used as a blueprint to design your API, or you can write your own Data Provider to query an existing API. Writing a custom Data Provider is a matter of hours.

Data Provider architecture

See the Data Providers documentation for details.

Batteries Included But Removable

React-admin is designed as a library of loosely coupled React components built on top of material-ui, in addition to custom react hooks exposing reusable controller logic. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.


There are several examples inside the examples folder:

  • simple (CodeSandbox): a simple application with posts, comments and users that we use for our e2e tests.
  • tutorial (CodeSandbox): the application built while following the tutorial.
  • demo: (Live) A fictional poster shop admin, serving as the official react-admin demo.

You can run those example applications by calling:

# 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

And then browse to the URL displayed in your console.


You can get professional support from Marmelab via React-Admin Enterprise Edition, or community support via StackOverflow.

Versions In This Repository

  • master - commits that will be included in the next patch release

  • next - commits that will be included in the next major or minor release

Bugfix PRs that don't break BC should be made against master. All other PRs (new features, bugfix with BC break) should be made against next.


If you want to give a hand: Thank you! There are many things you can do to help making react-admin better.

The easiest task is bug triaging. Check that new issues on GitHub follow the issue template and give a way to reproduce the issue. If not, comment on the issue to ask precisions. Then, try and reproduce the issue following the description. If you managed to reproduce the issue, add a comment to say it. Otherwise, add a comment to say that something is missing.

The second way to contribute is to answer support questions on StackOverflow. There are many beginner questions there, so even if you're not super experienced with react-admin, there is someone you can help there.

Pull requests for bug fixes are welcome on the GitHub repository. There is always a bunch of issues labeled "Good First Issue" in the bug tracker - start with these.

If you want to add a feature, you can open a Pull request on the next branch. We don't accept all features - we try to keep the react-admin code small and manageable. Try and see if your feature can't be built as an additional npm package. If you're in doubt, open a "Feature Request" issue to see if the core team would accept your feature before developing it.

For all Pull requests, you must follow the coding style of the existing files (based on prettier), and include unit tests and documentation. Be prepared for a thorough code review, and be patient for the merge - this is an open-source initiative.

Tip: Most of the commands used by the react-admin developers are automated in the makefile. Feel free to type make without argument to see a list of the available commands.


Clone this repository and run make install to grab the dependencies, then make build to compile the sources from TypeScript to JS.

Online one-click Setup

You can use Gitpod(An Online Open Source VS Code like IDE which is free for Open Source) for working on issues and making PRs. With a single click it will launch a workspace and automatically clone the repo, run make install and make start so that you can start straight away.

Open in Gitpod

Testing Your Changes In The Example Apps

When developing, most of the time we use the simple example to do visual check. It's the same application that we use in CodeSandbox to reproduce errors (see https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple). The source is located under examples/simple/. Call make run to launch that example on port 8080 (http://localhost:8080). This command includes a watch on the react-admin source, so any of the changes you make to the react-admin packages triggers a live update of the simple example in your browser.

However, the simple example is sometimes too limited. You can use the demo example (the source for https://marmelab.com/react-admin-demo/), which is more complete. The source is located under examples/demo/. Call make run-demo to launch the demo example with a REST dataProvider, or make run-graphql-demo to run it with a GraphQL dataProvider. Unfortunately, due to the fact that we use Create React App for this demo, these commands don't watch the changes made in the packages. You'll have to rebuild the react-admin packages after a change (using make build, or the more targeted make build-ra-core, make build-ra-ui-materialui, etc) to see the effect in the demo app.

Both of these examples work without server - the API is simulated on the client-side.

Testing Your Changes In Your App

Using yarn link, you can have your project use a local checkout of the react-admn package instead of npm. This allows you to test react-admin changes in your app:

# Register your local react-admin as a linkable package
$ cd /code/path/to/react-admin/packages/react-admin && yarn link

# Replace the npm-installed version with a symlink to your local version 
$ cd /code/path/to/myapp/ && yarn link react-admin

# If you run into issues with React red-screen, then you need to register your app's version of React as a linkable package 

$ cd /code/path/to/myapp/node_modules/react && yarn link
# And then replace the npm-installed version of React with a symlink to your app's node_modules version
$ cd /code/path/to/react-admin/ && yarn link react

# Rebuild the packages with the same version of React
$ cd /code/path/to/react-admin/ && make build

# Return to your app and ensure all dependencies have resolved 
$ cd /code/path/to/myapp/ && yarn install

# Start your app
$ yarn start

Automated Tests

Automated tests are also crucial in our development process. You can run all the tests (linting, unit and functional tests) by calling:

make test

Unit tests use jest, so you should be able to run a subset of tests, or run tests continuously on change, by passing options to

yarn jest

Besides, tests related to the modified files are ran automatically at commit using a git pre-commit hook. This means you won't be able to commit your changes if they break the tests.

When working on the end to end tests, you can leverage cypress runner by starting the simple example yourself (make run-simple or yarn run-simple) and starting cypress in another terminal (make test-e2e-local or yarn test-e2e-local).

Coding Standards

If you have coding standards problems, you can fix them automatically using prettier by calling

make prettier

However, these commands are ran automatically at each commit so you shouldn't have to worry about them.


If you want to contribute to the documentation, install jekyll, then call

make doc

And then browse to http://localhost:4000/


React-admin is licensed under the MIT License, sponsored and supported by marmelab.

FOSSA Status


This library is free to use, even for commercial purpose. If you want to give back, please talk about it, help newcomers, or contribute code. But the best way to give back is to donate to a charity. We recommend Doctors Without Borders.

  • 4.0 Roadmap

    4.0 Roadmap

    We're starting to think about the next major milestone for react-admin. It'll mostly be a cleanup release, removing all the deprecated features and the compatibility layers we put in place. It should also be the occasion to use the latest major version of our dependencies.

    Breaking Changes

    • ✅ Upgrade material-ui to v5 (#6650)
    • ✅ Remove redux-saga and saga-based side effects (#6684)
    • ✅ Remove declarative side effects support in dataProvider (#6687)
    • ✅ Remove connected-react-router (#6704)
    • ✅ Remove support for undoable prop now that we have mutationMode (#6711)
    • ✅ Replace react-final-form with formik or react-hook-form (#7087)
    • ✅ Upgrade react-router to V6 (#6873)
    • ✅ Remove permissions injection in main route controllers (#6921)
    • ✅ Switch WithPermissions wrapping to a useAuthenticated hook in main controllers (based on a boolean so that users can create an anonymous show view with <Show authenticated={false}>) (#6921)
    • ✅ Replace Redux-based query cache by react-query and initial data from query cache
      • useGetOne (#6779)
      • useGetList (#6916)
      • useGetMany (#7006)
      • useGetManyReference (#7016)
      • useCreate (#7025)
      • useUpdate (#6891)
      • useDelete (#7035)
      • useUpdateMany (#7020)
      • useDeleteMany (#7035)
      • ✅ Cleanup data reducers (#7001)
    • ✅ Use MUI autocomplete instead of our own (#6924, #6971)
    • ✅ Remove Resource initialization, Store Resource definitions in Context rather than in store (#7051)
    • ✅ Remove deprecated sort prop in <DataGridHeaderCell> (#7065)
    • ✅ Rename currentSort to sort (#7076)
    • ✅ Change the Record TypeScript name (which already exists in TypeScript) (#7078)
    • ✅ Put Notification component in the AdminUI to avoid gotchas when overriding the layout, and remove notifications from Redux store (#7082)
    • ✅ Remove basePath (#7100)
    • ✅ Allow to pass custom params to each dataProvider hooks (#7116)
    • ✅ Add support for partial pagination (i.e. no total) (#7120)
    • ✅ Remove TestContext (AdminContext does the trick) and ra-test (#7148)
    • ✅ Add ChoicesContextProvider in all ReferenceInputs to avoid child cloning with choices and allow choices filtering, pagination, and sorting (#7185)
    • ✅ Replace RichTextInput with TipTap version (#7153)
    • ✅ Remove prop injection and child cloning, use context instead (#7060, #7218, #7215, #7214, #7207, #7206, #7205, #7203)
    • ✅ Avoid cloning inputs to pass variant and margin, and document theme override instead (#7223)
    • ✅ Remove HOCs (like addField) and render props
    • ✅ Make the signatures of useGetList, useGetMatching, useGetMany and useGetManyReference consistent (some return a RecordMap, some return an array of records)
    • ✅ Upgrade dependencies to their latest major versions
    • ✅ Remove useGetMatching (use getList instead) (#6916)
    • ✅ Add support for sx props in all ra-ui-materialui components
    • ✅ Store user preferences outside of Redux (and make them persistent) (#7158)
    • ✅ Backport Preferences features from ra-enterprise
    • ✅ Remove Redux (#7177)
    • ✅ Review UI and alignments
    • ✅ Profile and optimize
    • ✅ check FIXMEs in code
    • ✅ Review all examples to make sure the code is canonical
    • ✅ React 18 compatibility (#7377)

    These items didn't make it into the release:

    • ~~Automate integration of authProvider and dataProvider for credentials~~ Not crucial
    • ~~Change GraphQL Data Provider approach to avoid relying on runtime introspection (#6639)~~ Will be done in a minor release
    • ~~Update BooleanInput signature (#4273)~~
    • ~~Use MUI Datagrid instead of our own~~ Maybe in a future version
    • ~~Write codemods to facilitate the upgrade~~

    We won't break BC for another year or two after 4.0, so we'd better wait to incorporate the new major releases of our dependencies. This causes the following releases to be blockers:

    • Selectors for react useContext (https://github.com/reactjs/rfcs/pull/119)


    Work on v4 started in September 2021, and is expected to end in early 2022.

    Note: Please don't post comments with feature requests that don't need a breaking change here. React-admin releases new features on a monthly basis, and doesn't need a major release for that. This discussion is only for backwards-incompatible changes.

    opened by fzaninotto 128
  • Roadmap to React-Admin 3.0

    Roadmap to React-Admin 3.0

    React-admin v2 is about one year old. We've kept backward compatibility for a year, but it means we can't yet use all the new shiny tools that our dependencies have shipped since then in major releases.

    The objectives of the next release, v3, are to:

    • [x] Upgrade dependencies to the latest major version
      • [x] Upgrade react and react-dom to 16.8 to use Hooks (#3170)
      • [x] Upgrade material-ui to 4.2.1 (instead of 1.5) to use... a lot of things, uncluding the useStyle hook (#3191)
      • [x] Upgrade react-redux to 7.1.0 (instead of 5.0) to use useDispatch and useSelector hooks instead of connect (#3170)
      • [x] Upgrade redux-saga to 1.0 (because we're on a non-supported version) (#3212)
      • [x] Switch from redux-form to react-final-form (#3455)
    • [x] Turn logic components into hooks
      • [x] Replace fetch, accumulate, undo and callback sagas by data hooks for fetching the dataProvider (useQuery, useMutation, useDataProvider) (#3181)
      • [x] Add CRUD hooks (#3253)
      • [x] Replace auth saga by auth hooks (useAuth, usePermissions) (#3368)
      • [x] Replace i18n saga by i18n hooks (useTranslate, useLocale, useSeltLocale) (#3188, #3672, #3685))
      • [x] Replace notification, redirect, and refresh sagas by hooks (useNotify, useRedirect, useRefresh) (#3425)
      • [x] Add controller hooks to replace our controller components (#3213, #3217, #3228, #3236, #3398, #3377, #3406, #3409)
      • [x] Add useMediaQuery hook to replace the Responsive component (#3329)
      • [x] Update the documentation to use hooks (#3688)
      • [x] Update the examples to use hooks
    • [x] Turn providers to objects instead of functions
      • [x] authProvider (#3614)
      • [x] i18nProvider (#3699)
      • [x] dataProvider (#3726)
    • [x] Fix breaking change issues
      • [x] Replace injected elements by injected components (#3262)
      • [x] Upgrade redux-saga to 1.0 (#3212)
      • [x] Redirection to login should be done in the authProvider (#3269)
      • [x] Decouple data actions from views
      • [x] Rename appLayout to layout in (#3055)
      • [x] Use theme to store sidebar width (#3323)
      • [x] Replace papaparse by something lighter (#3324)
      • [x] Deprecation of react-router-redux (#3170)
      • [x] rename isLoading to loading everywhere (#3644)
      • [x] Remove deprecated components (#3247, #3517)
    • [x] UI adjustments
      • [x] Move actions out of the main card (#3214)
      • [x] Replace Headroom by MUI native implementation of auto-hiding app bar (#3247)
      • [x] Use filled variant by default in forms (#3594)
    • [x] Make sure the core codebase doesn't need the crudXXX actions and the fetch saga
    • [x] Reimplement AutocompleteInput and AutocompleteArrayInput using downshift (#3031, #3667)
    • [x] Decide whether we should stick to connected-react-router or not (because it's not active)
    • [x] Move most dependencies into peerDependencies for internal packages (#3763)
    • [x] Overhaul HTTP error handling (#3757)

    This will lead to a deep transformation of the library. We hope to minimize the breaking changes, but developers will have to follow a migration guide to use this new version with existing code. We'll try to make that as painless as possible.

    We'll need help from volunteers to test the changes before releasing a stable version. We'll publish alpha and beta releases for that purpose.

    We expect the 3.0 to be released sometime in the Summer of 2019. Development has already started and is visible on the next branch. We tag related pull request with the 3.0 milestone so you can track our progress.

    Comments are welcome. Help migrating class components to functional components using hooks is also welcome (although we don't have the objective of migrating all the codebase to functional components for 3.0. This can happen later).

    opened by fzaninotto 79
  • [RFR] Feature embedded arrays

    [RFR] Feature embedded arrays

    Field Array Implementation based on RFC #695

    • [x] Main Behavior Development.
    • [x] Changing Button Colors to blue (primary buttons).
    • [x] Changing name to EmbeddedArrayInput
    • [x] Renaming elStyle to arrayElStyle.
    • [x] Adding FormField-like rendering features.
    • [x] Writing Tests.
    • [x] Translation framework compatibility.
    • [x] Implement EmbeddedArrayField.


    • Currently I've set the default behavior is to show element as lines. User can change that by providing an elStyle attribute like {display: 'inline-block'}
    • I've tried to re-use FormField but I think we cannot since it uses the same source provided by the input meanwhile we need to prefix it by something like array[index]. should i skip this? or edit the FormField to support prefixes ?
    • Proposed Alternative component names: EmbeddedArrayInput or just ArrayInput.
    • using elStyle to style each group might be confusing, should i use another name? any suggestions?

    Current Component Example

    <EmbeddedManyInput source="links"> <!-- Line by line -->
        <TextInput source="url" />
        <TextInput source="context"/>
    <EmbeddedManyInput source="links" elStyle={{display: 'inline-block'}}> <!-- inline blocks (grid-like) -->
        <TextInput source="url" />
        <TextInput source="context"/>
    opened by MhdSyrwan 68
  • [v3] improve peerDependency

    [v3] improve peerDependency

    singletons should be a peer; react-redux thus probably should be

    singletons (something that shares mutable state, and needs to have only one copy in the dependency graph)

    Also redux is a way to store state. it is definitely a singleton.

    If your lib has react-redux v3.0 as a dep, and someone else has v3.1, you'll have two copies in memory and things will break.

    react-redux should be a peer dep, so should react-router

    Also, it should be using ^ not ~ throughout, because ~ means "just patch" and ^ means "patch or minor"

    You want semver ranges to be as wide as possible to allow for as much deduping and upgrading as possible.

    breaking change 
    opened by kopax 50
  • Error in dependency package

    Error in dependency package "ra-ui-materialui" used by react-admin

    Hi Team, I am currently facing a issue which appears to be appearing from one of the dependent package used by react-admin which is "ra-ui-materialui".

    It says "./node_modules/ra-ui-materialui/esm/layout/DeviceTestWrapper.js Attempted import error: 'createTheme' is not exported from '@material-ui/core/styles' ". I am using "react-admin": "^3.17.0".

    Following are the some of the package version which I m using.

    "@material-ui/core": "4.11.4", "@types/react": "^16.14.11", "react-admin": "^3.17.0". "react": "^16.13.1", "typescript": "~3.8",

    Due to above reason, my code has stopped working. If you need anything else please let me know.


    opened by rohan-techahead 37
  • Add Bulk Actions to Lists

    Add Bulk Actions to Lists

    We can make items in list selectable.. But there is no way to manipulate those selected items.. It would be great to have an ability to add bulk actions component as well as filter.

    Thank you for your awesome work!

    opened by mstmustisnt 30
  • Upgrade Material UI to Latest Stable

    Upgrade Material UI to Latest Stable

    I'm pretty new to material ui, but it looks like latest stable is at 3.2, but react-admin is still on ^1.4. When implementing customizations to the react-admin, it caused me to lose some time because I was trying to figure out why certain Material UI code wasn't working and then I found out react-admin just uses an older version.

    Is there anything stopping this project from being able to bump up to material ui 3.2 other than just the work to port it over?

    Thanks again for all the hard work into this library!

    opened by ragboyjr 29
  • [RFR] Inline forms

    [RFR] Inline forms

    As mentioned in #735, this allows us to create referenced items directly from the parent's create page without having to navigate to another resource page.

    This feature is optional, so if the user needs to allow creating items for a particular ReferenceArrayInput, he needs to pass an inlineForm prop containing a form element (SimpleForm for example):

    const TagsInlineForm = () => (
            <TextInput source="name" />
    // then render ReferenceArrayInput somwhere
         <SelectArrayInput optionText="name"  />

    If input components other than SelectArrayInput need to support creating items, they have to do the following:

    • Provide a UI element for the user to choose creating a new item.
    • Calling onCreateInline (received as a prop from ReferenceArrayInput) with the following arguments:
      • a partial record: containing any text typed by the user so far, used for giving the inline form fields initial values.
      • a callback function: it receives the created record (returned by the rest client) as its argument, this should be used to insert the record to the list of selected values (a chip in SelectArrayInput's case).

    Possible Issues

    ~~- Still haven't tried nesting (if the inline form itself contains ReferenceArrayInput which also allows for creating).~~

    opened by AmrN 29
  • Add Typescript types

    Add Typescript types


    We want to migrate react-admin to TypeScript and release types with the library.

    That doesn't mean that you won't be able to use react-admin if you're not using TypeScript. React-admin will still publish both JS files (as today) and .d.ts files (ignored by non-typescript users). So if you don't use TypeScript, that won't change anything for you.

    We've started a migration effort a year ago. As of writing, 70% of the codebase is in already TypeScript. We use these types internally during development. We've only released the types for ra-core publicly.

    We're working on migrating the rest of the codebase. It's a long and tedious job. It's not the core team priority. Your help is welcome.


    We don't want to emit bad types, because it would break existing TS applications. Therefore, we need to test the types thoroughly.


    Migrating the demo should be the priority, as it allows us to validate our types internally before publishing them.

    1. ✔️ Migrate all .js files to .ts files in the example demo (https://github.com/marmelab/react-admin/tree/master/examples/demo).
    2. ✔️ Migrate all ra-ui-materialui JS files to TypeScript. Publish the compiled types in the next ra-ui-material-ui release.
    3. ✔️ Convert the rest of react-admin dependencies (ra-language-english, etc) to typeScript, publish their types
    4. ✔️ Locally, emit the types from react-admin in development. This is when things will break. Test the demo, test on as many existing TS apps as possible. Once all the types are checked, and only then,
    5. ✔️ Release react-admin types officially
    6. ???
    7. Profit

    All these changes must be done on the next branch (master is only for bug fixes).

    How you can help

    If you know and understand the react-admin internals, and if you are an experienced TypeScript developer, please help us migate .js files to .ts in the order described above.

    This is not an easy task. If you don't have enough knowledge of the react-admin internals, then please leave it to people more knowledgeable. Otherwise, the core team will spent more time answering your questions than doing the migration themselves.

    What to do in the meantime

    Some community packages for react-admin types can be found here and there. They are outdated. Disable TypeScript checking on the react-admin modules.

    opened by fzaninotto 28
  • translate doesn't work

    translate doesn't work

    I am using admin on rest 1.3.1 and I am reading at this documentation :


    It says that you can import a translate method like so:

    // in src/MyHelloButton.js
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    class MyHelloButton {
        render() {
            const { translate } = this.context;
            return <button>{translate('myroot.hello.world')}</button>;
    MyHelloButton.contextTypes = {
        translate: PropTypes.func,

    I have a <IntlProvider /> wrapping my react app and messages are fully loaded but:

    • Using translate throw error :

    Warning: Failed context type: The context translate is marked as required in getContext(MyHelloButton), but its value is undefined. in getContext(MyHelloButton) (created by HomePage)

    I have read at the react-intl documentation here https://github.com/yahoo/react-intl/wiki/API#injectintl and they provide a HoC injectIntl that can be used to retrieve messages.

    This is how I fixed translate.js with injectIntl:

    import React from 'react';
    import { compose } from 'redux';
    import { connect } from 'react-redux';
    import { injectIntl } from 'react-intl';
    export default (Component) => {
      function TranslateComponent(props) {
        const { intl, ...rest } = props;
        return (
          <Component {...rest} translate={(id) => intl.formatMessage({ id })} />
      return compose(

    I am using react-intl 2.4.0.

    • Why did AOR added such method ?
    • Which one I should use ?
    • It's a shame to only use translate if we can't access formatDate and other helpers so I think injectIntl should be use.

    Also if anybody know why I have this error, thanks:!

    opened by kopax 27
  • Stylesheet class names conflict with production build (issue with JSS minification)

    Stylesheet class names conflict with production build (issue with JSS minification)

    We noticed a severe issue when passing our project in production. Our app seems to be empty:


    Seems, because everything is correctly set up in the DOM:


    The issue seems related to JSS, which has some troubles generating class names. Each time it see a withStyles, it increments a counter. Yet, it seems that MaterialUI and react-admin uses two distinct counters. Hence, when the classes are minified (removing the component display name), classes are renamed such as:

    • MaterialUI: jss1, jss2, etc.
    • React Admin: jss1, jss2, etc.

    This duplication cause the issue mentioned above.

    We temporarily fixed it on our project side, using a custom class name generator, using the same counter for every classes.

    const escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
    let classCounter = 0;
    // Heavily inspired of Material UI:
    // @see https://github.com/mui-org/material-ui/blob/9cf73828e523451de456ba3dbf2ab15f87cf8504/src/styles/createGenerateClassName.js
    // The issue with the MUI function is that is create a new index for each
    // new `withStyles`, so we handle have to write our own counter
    export const generateClassName = (rule, styleSheet) => {
        classCounter += 1;
        if (process.env.NODE_ENV === 'production') {
            return `c${classCounter}`;
        if (styleSheet && styleSheet.options.classNamePrefix) {
            let prefix = styleSheet.options.classNamePrefix;
            // Sanitize the string as will be used to prefix the generated class name.
            prefix = prefix.replace(escapeRegex, '-');
            if (prefix.match(/^Mui/)) {
                return `${prefix}-${rule.key}`;
            return `${prefix}-${rule.key}-${classCounter}`;
        return `${rule.key}-${classCounter}`;

    Then we wrapped our Admin component in:

    import JssProvider from 'react-jss/lib/JssProvider';
    export default () => (
        <JssProvider generateClassName={generateClassName}>
            <Admin />

    Should I open a PR with this hack-ish fix? It looks like a critical issue, as it prevents from deploying react-admin to production. Yet, I'm not convinced by this solution.

    opened by jpetitcolas 26
  • browser verbose

    browser verbose "advice": [DOM] Input elements should have autocomplete attributes (suggested: "username")

    What you were expecting: Expecting a clean browser console with no yellow advice.

    What happened instead: The authProvider feature pops up a login form that has a username input which fails to provide an autocomplete=username attribute. The absence of this attribute causes Version 108.0.5359.125 (Official Build) (64-bit) of Chrome to log advice in the console that [DOM] Input elements should have autocomplete attributes (suggested: "username"): (More info: https://goo.gl/9p2vKq)

    Environment Chrome is up to date Version 108.0.5359.125 (Official Build) (64-bit)

    • React-admin version: "version": "4.6.2",
    • Last version that did not exhibit the issue (if applicable):
    • React version: "version": "18.2.0",
    • Browser: Chrome Version 108.0.5359.125 (Official Build) (64-bit)
    enhancement good first issue 
    opened by jrobbins-LiveData 6
  • Extended AutocompleteInput with useChoicesContext and optionText clears itself and flickers

    Extended AutocompleteInput with useChoicesContext and optionText clears itself and flickers

    What you were expecting:

    Input should behave like normal AutocompleteInput. Same as without using useChoicesContext, options don't flicker, input doesn't clear itself after network call.

    What happened instead: After network call is made to ReferenceInput's reference, the input clears, the dropdown show previous options and then flickers the filtered options.

    Steps to reproduce: Go to any PostEdit, first input is Test users, type in something, then the flickering and input text clear happen.

    Related code: https://stackblitz.com/edit/github-jnpt6d?file=src%2Fposts%2FUserReferenceInput.tsx,src%2Fposts%2FPostEdit.tsx,src%2Fposts%2FUserAutocompleteInput.tsx

    Go to any src/posts/PostEdit.tsx, first input is

    <ArrayInput source="test_users" fullWidth>
      <SimpleFormIterator inline>
        <UserReferenceInput />

    inside UserReferenceInput there is UserAutocompleteInput which reproduces the issue.

    The bug is reproducible when UserAutocompleteInput uses both:

    • useChoicesContext to somehow read the choices
    • optionText, inputText and matchSuggestion functionality.

    I tried passing all the props or forwarding the ref which didn't help.


    • React-admin version: 4.6.2
    • React version: 17.0.2
    • Browser: Chrome 108
    opened by harastaivan 1
  • [WIP] Use normal store instead of React state with disabled location sync

    [WIP] Use normal store instead of React state with disabled location sync

    This change is to continue using the normal React Admin store (local storage by default) when disableSyncWithLocation is used, this enables filters, sort, and pagination to be persisted across navigation and component mount/unmount.

    I feel this meets the design choice that filter values are persisted in application state as stated at the bottom of this section even if you need to not sync those values with the location due to have multiple List components on one page.

    Skips the navigate call and directly calls setParams

    I'm open to comments if there is a thought this may be a breaking change and can update the target to next.

    My only thought on that is if someone used disableSyncWithLocation to kill all filter persistence. In that case, I would suggest those applications to use memoryStore for their app's store prop.

    If there's a need to separate these params, and allow the use of local storage store for other items still, I would suggest a new prop on List for disableFilterPersist

    opened by btbenedi 5
  • Mutation hooks return non-memoized functions

    Mutation hooks return non-memoized functions

    I'm really unsure if it's a bug, a support question or a feature request but I don't see why it should work like that so I categorized it as a bug. The problem is that hooks like useUpdate or useDelete return a bare function, that is, a function that's not wrapped in useCallback. If I use it inside useEffect and pass it as a dependency, this effect fires on each render because useUpdate returns a new instance of the update function for no obvious reason.

    What you were expecting: Mutation hooks return the same memoized function unless their parameters change between renders.

    What happened instead: Mutation hooks return new function instances on each render.

    Steps to reproduce: Take the update function as const [update] = useUpdate();, then use it inside useCallback or useEffect. React linter would complain that it should be present in the dependency array and if you add it there the callback will update and effect will fire on each render. It's wasteful and might become a problem, for example, if you setup a timer in that effect and cancel it on cleanup. If the user keeps causing rerenders (that shouldn't affect the timer) it might be delayed a lot.

    Other information: The offending line is here: https://github.com/marmelab/react-admin/blob/bdff90eeb1e3e7012565c695d6cd7bf5d953d5a6/packages/ra-core/src/dataProvider/useUpdate.ts#L268 IMO, this function should be wrapped in useCallback but the list of dependencies might be long (I didn't try it). Same for useUpdateMany, useDelete and useCreate.

    A quick and dirty way is to simply ignore the linter and not include the function as a dependency. I'm not sure if it causes any issues but so far it seems to work okay for me despite the warning. Not the cleanest way of course and it's not right: other side-effect hooks such as useNotify or useRefresh don't have this problem as they're properly wrapped in useCallback.


    • React-admin version: 4.6.2
    • Last version that did not exhibit the issue (if applicable): unsure
    • React version: 18.1
    • Browser: Brave 1.46.144 Chromium: 108.0.5359.128
    opened by rkfg 3
  • Hardcoded size value for SelectArrayInput

    Hardcoded size value for SelectArrayInput

    What you were expecting: SelectArrayInput to honor defaultProps set for MuiSelect component

    What happened instead: SelectArrayInput has a hardcoded size prop that is not possible to override

    Steps to reproduce: add following to the components sections of the theme

    MuiSelect: {
          defaultProps: {
            variant: 'outlined',
            size: 'medium',

    Related code: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx#L295

    Other information:


    • React-admin version: latest
    • Last version that did not exhibit the issue (if applicable):
    • React version:
    • Browser:
    • Stack trace (in case of a JS error):
    bug good first issue 
    opened by amilosmanli 1
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React Start your Development with an Innovative Admin Template for Material-UI and React. If you like the look & feel of the hottest

Creative Tim 182 Dec 28, 2022
Accessible, unstyled, open-sourced, and fully functional react component library for building design systems

DORAI UI Accessible, unstyled, open-sourced and fully functional react component library for building design systems Documentation site coming soon St

Fakorede Boluwatife 38 Dec 30, 2022
Material Design Web Components

Material Web IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release. Material Web is Google’s UI toolkit for bui

Material Components 4.6k Dec 31, 2022
Material Design Lite for Ember.js Apps

ember-material-lite Google's Material Design Lite for Ember.js apps This addon requires ember >= 1.11.0 Installation # ember-cli < 0.2.3 ember install

Mike North 148 Dec 17, 2021
Ember implementation of Google's Material Design

No longer maintained This project is no longer maintained. For an up-to-date material design project, please use Ember Paper. Ember-material-design Th

Mike Wilson 121 Mar 1, 2022
A component library based on Material Design 3 & Web Components

material-web-entity Material Web Entity A component library based on Material Design & Web Components Go to link to see what components this library s

HugePancake 5 Jun 3, 2022
Juka Official Website built on top of Docusaurus/React Framework. Help us make it better!

Juka Programming Language Juka Programming Language website is built on top of Docusaurus 2. Feel free to contribute to our website! Any help is appre

Juka Programming Language 5 Dec 24, 2022
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Module SonarCloud Status ag-grid-community ag-grid-enterprise AG Grid AG Grid is a fully-featured and highly customizable JavaScript data grid. It del

AG Grid 9.5k Dec 30, 2022
This is a custom recipe app called chefMaster. which contains a lot of interesting such as many apis requests, filter, search , add posts. Property design

In the project directory, you can run: npm start Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page

Andrew Smal 0 Nov 9, 2022
👉 Built my first React JS project "ToDo" webapp using some Features and Icons from Material UI.

# Getting Started with Create React App This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). ## Avai

Vansh Chitlangia 2 Dec 15, 2021
React-app - Building volume rendering web app with VTK.js,react & HTML Using datasets provided in vtk examples (head for surface rendering and chest for ray casting)

SBE306 Assignment 4 (VTK) data : Directory containing Head and Ankle datasets Description A 3D medical viewer built with vtk-js Team Team Name : team-

Mustafa Megahed  2 Jul 19, 2022
a more intuitive way of defining private, public and common routes for react applications using react-router-dom v6

auth-react-router is a wrapper over react-router-dom v6 that provides a simple API for configuring public, private and common routes (React suspense r

Pasecinic Nichita 12 Dec 3, 2022
React features to enhance using Rollbar.js in React Applications

Rollbar React SDK React features to enhance using Rollbar.js in React Applications. This SDK provides a wrapper around the base Rollbar.js SDK in orde

Rollbar 39 Jan 3, 2023
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Kriasoft 21.7k Dec 30, 2022
Finished code and notes from EFA bonus class on building a React project without create-react-app

React From Scratch Completed Code This is the completed code for the EFA bonus class on building a React project from scratch. Included are also markd

Conor Broaders 3 Oct 11, 2021
React components and hooks for creating VR/AR applications with @react-three/fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr These demos are real,

Poimandres 1.4k Jan 4, 2023
null 136 Dec 30, 2022