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/core/svg-icons/action/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
  • Empty text fields and

    Empty text fields and "" vs null

    What you were expecting:

    I have a couple of forms with textfields.

    An example openapi spec would be:

        - name
      type: object
          type: string
          type: string

    Here is what i would expect:


    • name: "michael", nickname: "" => {name: "michael"}
    • name: "michael", nickname: "mick" => {name: "michael", nickname: "mick"}


    • name: "michael", nickname: "" => {name: "michael", nickname: ""}
    • name: "michael", nickname: "mick" => {name: "michael", nickname: "mick"}

    What happened instead:

    When "nickname" was empty, in the request object "nickname" was set to null. this is documented behavior: https://github.com/marmelab/react-admin/blob/master/docs/SimpleForm.md#sanitizeemptyvalues and it is stated that this is expected by most backends. https://github.com/marmelab/react-admin/blob/032e1464cd23cf15dbc4d641e9663f74b37b9563/packages/ra-core/src/form/useInput.ts#L23-L24

    From my understanding, this is how an optional text-field would be handled in a backend

    • not present in the object => optional => don't touch it
    • empty string "" => set the value as an empty string
    • any other string => set the value.

    So it might make sense to remove the value from the object when the state has not changed, but to make it null when it is empty feels a bit counter-intuitive to me. In pydantic for example this would be an error:


    Also this reads to me as it would be preferable to use an empty string: https://stackoverflow.com/questions/45575493/what-does-required-in-openapi-really-mean

    This seems to be a choice made by react-admin dev's and that*s okay, but I would like to get your motivation on this and maybe you can point me to the backends that implemented this in that particular way?

    I will also send a pull-request to update the docs with an example if that's okay.

    related issues/prs

    https://github.com/marmelab/react-admin/pull/8188 https://github.com/marmelab/react-admin/pull/8262



    • React-admin version: 4.6.0
    • Last version that did not exhibit the issue (if applicable): 4.2.2
    • React version: 17
    • Browser: recent firefox & chrome
    • Stack trace (in case of a JS error):
    opened by hiaselhans 0
  • dependent useLists on a single page

    dependent useLists on a single page

    What you were expecting: Lists created via useList (and their actions/bulk actions) should be independent.

    What happened instead: Bulk actions and selections are shared for all lists on a given page, including for any list items that have an identical id.

    Steps to reproduce: Go to the codesandbox, click on any of the list items from the uselist, see that you get reactions on both lists rather than just the list that was interacted with.

    Related code:

    https://codesandbox.io/s/kind-panka-mzlf4j?file=/src/comments/CommentShow.tsx https://mzlf4j.sse.codesandbox.io/#/comments/1/show


    • React-admin version: 4.6.2
    • React version: 17
    • Browser: Chrome
    opened by AntonOfTheWoods 0
  • AutocompleteArrayInput along ReferenceArrayInput clears input search string on each request after at least one selected option

    AutocompleteArrayInput along ReferenceArrayInput clears input search string on each request after at least one selected option

    I followed guide at https://marmelab.com/react-admin/AutocompleteArrayInput.html#using-in-a-referencearrayinput

    Related code:

    <ReferenceArrayInput perPage={200} reference="methods" source="methods">
              filterToQuery={(searchText: string) => ({ name: searchText })}

    Steps to reproduce:

    1. Select at least one value in AutocompleteArrayInput
    2. Start typing for next value

    What you were expecting: entered text remains after search request

    What happened instead: after each new search request text disappears, immediately sending request with empty string, making it impossible to search for next values



    • react-admin: 4.6.1 (same issue on 4.6.2)
    • react: 17.0.2
    opened by ise540 0
  •  fixed: DateInput years digits length is 4.

    fixed: DateInput years digits length is 4.

    https://github.com/marmelab/react-admin/issues/8520 based on this issue, I made a change into the DateInput component. As we want to allow users to input only 4 digits to years I just take the last 4 digits user is entering to years.

    opened by shavidze 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

    breaking change WIP 
    opened by btbenedi 2
React components and hooks for fast building dApps without running own backend

dapp-dex React components and hooks for fast building dApps without running own backend This dapp-dex is built on react-moralis and Moralis. Also has

Deepak Perla 0 Jul 13, 2022
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 14.5k Dec 31, 2022
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Shaun Mak 4 Nov 8, 2021
An open-source UI component library for building high-quality, accessible design systems and web apps

An open-source UI component library for building high-quality, accessible design systems and web apps

Radix 7k Jan 8, 2023
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDBootstrap 1.3k Dec 30, 2022
Inject React components into 3rd-party sites using ShadowDOM with ease (and without troubles with styles)! Particularly useful in browser extensions

Inject React components into 3rd-party sites using ShadowDOM with ease (and without troubles with styles)! Particularly useful in browser extensions

Oleh 24 Dec 20, 2022
Option+Click a Component in the browser to instantly goto the source in your editor

Option+Click a Component in the browser to instantly goto the source in your editor

Eric Clemmons 1.4k Jan 2, 2023
fitfab user interface experience is a collection of React components and utilities for building user interfaces using web api technologies

fitfab user interface experience is a collection of React components and utilities for building user interfaces using web api technologies. (and of course, Reactjs.)

Miguel Julio 1 Jun 1, 2022
Build your frontend faster with Formation—20+ react-based UI components.

Build your frontend faster with Formation—20+ react-based UI components. Free and open-source.

Josh Schneider 145 Jan 1, 2023
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 8.1k Jan 7, 2023
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 30.4k Dec 31, 2022
A React Component library for buliding modern applications easily & quickly.

A React Component library for building modern applications easily & quickly

Elementz 344 Nov 11, 2022
A React JS PCF Code Component I created for model-driven applications

This control is a React JS PCF Code Component I created for model-driven applications. Model-driven applications do not allow mixed currency symbols on a form by default. While the underlining hidden control is dollars, the visual (this PCF control) shows the Euro Symbol.

Daniel Penrod 2 Oct 19, 2022
Text highlighting component for react applications

Text highlighting component for react applications

Vladyslav Kapkan 1 Apr 4, 2022
🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box. Flexible & composable. Evergreen components are

Segment 12k Jan 5, 2023
React components for Bulma framework

React-bulma-components React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js) V4 Pool Please Check h

John 1.2k Jan 8, 2023
React.js components for Modern CSS framework based on Flexbox

React-Bulma React.js components for Modern CSS framework based on Flexbox Styleguide: https://kulakowka.github.io/react-bulma/ Official Repo: https://

Anton Kulakov 467 Dec 7, 2022
👟 rbx – The Comprehensive Bulma UI Framework for React

rbx – The Comprehensive Bulma UI Framework for React ?? Read the docs. ?? I'll wait, go check them out! Features up-to-date Bulma implementation (0.7.

Devin Fee 476 Nov 16, 2022
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Ed Mortlock 267 Dec 28, 2022