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

Last update: Aug 7, 2022

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

react-admin-demo

Features

  • 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

Installation

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

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

Documentation

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';

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

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}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <DateField source="published_at" />
            <TextField source="average_note" />
            <TextField source="views" />
            <EditButton basePath="/posts" />
        </Datagrid>
    </List>
);

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

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

Does It Work With My API?

Yes.

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.

Examples

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.

Support

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.

Contributing

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.

Setup

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.

Documentation

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

make doc

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

License

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

FOSSA Status

Donate

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.

GitHub

https://github.com/marmelab/react-admin
Comments
  • 1. 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)

    Timeline

    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.

    Reviewed by fzaninotto at 2021-02-17 20:56
  • 2. 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).

    Reviewed by fzaninotto at 2019-05-07 14:32
  • 3. [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.

    Notes:

    • 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>
    
    <EmbeddedManyInput source="links" elStyle={{display: 'inline-block'}}> <!-- inline blocks (grid-like) -->
        <TextInput source="url" />
        <TextInput source="context"/>
    </EmbeddedManyInput>
    
    Reviewed by MhdSyrwan at 2017-05-24 18:59
  • 4. [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.

    Reviewed by kopax at 2018-03-21 11:10
  • 5. 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!

    Reviewed by mstmustisnt at 2016-10-03 11:58
  • 6. 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!

    Reviewed by ragboyjr at 2018-10-08 09:38
  • 7. [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 = () => (
        <SimpleForm>
            <TextInput source="name" />
        </SimpleForm>
    );
    
    // then render ReferenceArrayInput somwhere
    <ReferenceArrayInput
        reference="tags"
        source="tag_ids"
        inlineForm={TagsInlineForm()}
        allowEmpty
    >
         <SelectArrayInput optionText="name"  />
    </ReferenceArrayInput>
    

    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).~~

    Reviewed by AmrN at 2017-06-08 20:28
  • 8. Add Typescript types

    Context

    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.

    Risk

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

    Roadmap

    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.

    Reviewed by fzaninotto at 2020-03-10 17:44
  • 9. translate doesn't work

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

    https://marmelab.com/admin-on-rest/Translation.html#translation-messages

    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(
        connect(),
        injectIntl,
      )(TranslateComponent)
    }
    

    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:!

    Reviewed by kopax at 2017-09-27 11:13
  • 10. 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:

    image

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

    image

    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 />
        </JssProvider>
    );
    

    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.

    Reviewed by jpetitcolas at 2018-04-25 10:20
  • 11. [RFR] Custom save button with redirect option for Create and Edit

    redirect prop for SaveButton:

    • [x] handleSubmit in Create and Edit accepts redirect params and creates proper action.
    • [x] saga can handle actions with redirect instruction.
    • [x] forms (SimpleForm and TabbedForm) accepts toolbar prop.
    • [x] forms pass down handleSubmit and onSubmit prop to Toolbar and Toolbar passes to its buttons.
    • [x] save buttons calls onSubmit with redirect.
    • [x] update example to demonstrate.
    • [x] test

    default behavior (save button does not have redirect prop): after create : hasEdit? go to edit ; hasShow? go to show ; go to list otherwise. after edit: go to list. after delete: list.

    Notes:

    1. If there are multiple buttons and submitOnEnter is true for the form, one of the buttons should be the "main" button (only one of the buttons is set to submitOnEnter={true} to be explicit).

    Closes #688

    Reviewed by wesley6j at 2017-05-23 15:35
  • 12. Fix delete contexts don't send mutation `meta`

    Fix #8016 Kudos to @carlos-duran

    • [x] Fix delete contexts don't send mutation meta
    • [x] Fix settings mutationOptions on <BulkDeleteWithConfirmButton>and <BulkDeleteWithUndoButton> generates an error
    • [x] Add mutationOptions prop description on delete buttons documentation

    useMutation documentation.

    Reviewed by septentrion-730n at 2022-07-29 21:39
  • 13. "theme" prop no longer updates/refreshes if providing a different "theme" conditionally.

    What you were expecting: In react-admin V3, I was able to update the theme conditionally and it was updating when rerendering.

    What happened instead: Now in react-admin V4 <Admin theme={theme} /> only keeps the first instance of theme, discarding other instances when rerendering.

    Steps to reproduce:

    Temporary solution Again, in V3 it was working directly with <Admin theme={conditionalTheme} /> without effort. Now the only solution that I have is to separate <AdminContext /> and <AdminUI />, then give a first theme instance to <AdminContext /> and then update the theme with my condition inside <AdminUI /> using useTheme. And now it's working.

    const theme = (condition) => {
      return !condition
        ? {
            ...defaultTheme,
            palette: {
              primary: green,
            },
          }
        : {
            ...defaultTheme,
            palette: {
              primary: yellow,
            },
          };
    };
    
    const App = (railsProps, railsContext) => {
      return () => {
        return (
          <BrowserRouter>
            <AdminContext
              dataProvider={dataProvider}
              authProvider={authProvider}
              i18nProvider={i18nProvider}
              theme={theme(false)}
            >
              <Resources />
            </AdminContext>
          </BrowserRouter>
        );
      };
    };
    
    const Resources = () => {
      const { permissions: initialPermissions } = usePermissions();
      const [permissions, setPermissions] = useState(initialPermissions);
      const [, setTheme] = useTheme();
    
      useEffect(() => {
        // dumb condition only to show my example, it could reset 2 or 3 times
        const condition = !permissions.something ? false : true;
        setTheme(theme(condition));
      }, [permissions]);
    
      return (
        <AdminUI layout={CustomLayout} loginPage={LoginPage}>
          {(updatedPermissions) => {
            setPermissions(updatedPermissions);
          }}
          <Resource name="example" />
        </AdminUI>
      );
    };
    
    Reviewed by newfylox at 2022-07-29 17:48
  • 14. Add a "Clear all filters" button

    Fix #7831

    • [x] Add a "Clear all filters" button in FilterButton component
    • [x] Add a storybook scenario
    • [x] Write unit tests
      • [x] Display if a filter is set
      • [x] Don't display if no filter is set
      • [x] Clears all filters when clicked

    https://user-images.githubusercontent.com/102964006/181250139-e211c744-d1c9-46ac-b79d-974027f2450d.mov

    Reviewed by septentrion-730n at 2022-07-27 12:47
  • 15. meta is undefined in params of delete method of dataProvider when using DeleteButton

    What you were expecting:

    Receiving meta in data provider when using DeleteButton with mutationOptions prop.

    What happened instead:

    meta is undefined in the delete method of dataProvider.

    Steps to reproduce:

    1. Open my fork of code sandbox, logout and login with "user" and "password"
    2. Navigate to Users, pick one and enter to Edit page
    3. Click on the Delete button
    4. Check the console

    Related code:

    https://codesandbox.io/s/young-pond-nioyun?file=/src/users/UserEdit.tsx:613-683

    // UserEdit.tsx line 34
    <DeleteWithConfirmButton mutationOptions={{ meta: { foo: "bar" } }} />
    
    // dataProvider.tsx line 47
    delete: (resource, params) => {
        // HERE
        console.log("No meta :(", { params });
        return dataProvider.delete(resource, params);
      }
    

    Other information:

    image image

    Suggestion to possible fix: https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/controller/button/useDeleteWithConfirmController.tsx#L98

    // ra-core/src/controller/button/useDeleteWithConfirmController.tsx line 98
    // ra-core/src/controller/button/useDeleteWithUndoController.tsx line 66
    
    // from
    { id: record.id, previousData: record }
    // to
    { id: record.id, previousData: record, meta: mutationOptions.meta }
    

    image

    Environment

    • React-admin version: 4.2.4
    • Last version that did not exhibit the issue (if applicable):
    • React version: 17
    • Browser: Chrome 100+
    • Stack trace (in case of a JS error):
    Reviewed by carlos-duran at 2022-07-27 12:35
  • 16. Partial Pagination Not Working for `ReferenceManyField`

    What you were expecting:

    When the getManyReference method of the dataProvider returns pageInfo instead of total, partial pagination should be in effect for the pagination component passed to the ReferenceManyField component.

    What happened instead:

    When the getManyReference method of the dataProvider returns pageInfo instead of total, the pagination component passed to the ReferenceManyField component does not render at all.

    Steps to reproduce:

    1. Pass a Pagination component to the ReferenceManyField: https://marmelab.com/react-admin/ReferenceManyField.html#pagination
    2. Have the getManyReference method of the dataProvider return pageInfo instead of total.

    Other information:

    This could be the culprit here as the pagination prop is not rendered unless total is defined.

    Environment

    • React-admin version: 4.0.1
    • React version: 18.0.0
    • Browser: Chrome 103.0.5060.134
    Reviewed by MichaelSandor at 2022-07-26 21:57
⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails
⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

Oct 12, 2021
Declarative data-fetching and caching framework for REST APIs with React
Declarative data-fetching and caching framework for REST APIs with React

Declarative data-fetching and caching framework for REST APIs with React

Jun 24, 2022
A high-performance framework with fine-grained observable-based reactivity for building rich applications

A high-performance framework with fine-grained observable-based reactivity for building rich applications

Aug 1, 2022
Create a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build system.
Create a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build system.

Mithril TS(Type script) JSX Create a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build syst

Feb 22, 2022
🌟 DataFormsJS 🌟 A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.
🌟 DataFormsJS 🌟 A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.

?? DataFormsJS ?? A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.

Jul 23, 2022
single-spa.js is an Open Source framework for bringing together multiple JavaScript microfrontends in a frontend application.

single-spa.js is an Open Source framework for bringing together multiple JavaScript microfrontends in a frontend application.

Feb 13, 2022
🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

??️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

Aug 2, 2022
A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript.
A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript.

A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript. It leverages React, inspired by re-frame.

Mar 2, 2022
web3-react🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

?? A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

Aug 4, 2022
Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.
Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.

Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.

Aug 8, 2022
🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

?? A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

Aug 3, 2022
A web framework for building virtual reality experiences (VR Web)
A web framework for building virtual reality experiences (VR Web)

Virtual Reality Made Simple: A-Frame handles the 3D and WebVR boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift

Jul 15, 2022
A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

Nov 1, 2021
Create beautfiful custom applications using 100ms' React SDK.
Create beautfiful custom applications using 100ms' React SDK.

Create beautfiful custom applications using 100ms' React SDK.

Aug 1, 2022
Web App using react framework

waldo.vision This is the website for waldo-anticheat :D Libraries used: React React-router React-router-hash-link React-helmet TODO: improve this list

Nov 12, 2021
A declarative, efficient, and flexible JavaScript library for building user interfaces.

React · React is a JavaScript library for building user interfaces. Declarative: React makes it painless to create interactive UIs. Design simple view

Jul 31, 2022
🗺 Universal router for web applications.

Expressive router for nodejs and the browser. Rill brings cascading middleware to the browser and enables a familiar routing solution for web applicat

Jul 11, 2022
The Full-stack Framework for React and other in Deno.

The Full-stack Framework for React and other in Deno.

Aug 7, 2022
A light-weight, comprehensive, reactive framework for business logic and when things change.

watchlight.dev v1.0.15 beta << For when things change. A light-weight, comprehensive, reactive framework for business logic and when things change. In

May 13, 2022