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

Overview

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

, document.getElementById('root') ); ">
// 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 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:

( ); const PostTitle = ({ record }) => { return Post {record ? `"${record.title}"` : ''}; }; export const PostEdit = (props) => ( } {...props}> ); export const PostCreate = (props) => ( ); ">
// 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}>
        <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.

Comments
  • 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)

    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.

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

    documentation 
    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.

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

    Capture1

    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!

    enhancement 
    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 = () => (
        <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).~~

    opened by AmrN 29
  • Add Typescript types

    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.

    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 :

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

    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:

    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.

    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:

    Person:
      required:
        - name
      type: object
      properties:
        name:
          type: string
       nickname:
          type: string
    

    Here is what i would expect:

    create:

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

    update

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

    image

    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

    https://github.com/marmelab/react-admin/issues/8472

    Environment

    • 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

    Environment

    • 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">
            <AutocompleteArrayInput
              filterToQuery={(searchText: string) => ({ name: searchText })}
              optionText="name"
            />
    </ReferenceArrayInput>
    

    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

    image

    Environment:

    • 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
Releases(v4.6.2)
Boilerplate for building applications with a React frontend and a C++ gRPC backend

Boilerplate for building applications with a React frontend and a C++ gRPC backend. How To Run Backend Install Bazel Bazel is for building the backend

null 3 Oct 16, 2022
A boilerplate of SPA, built with React.js, Webpack, ES6+, Redux, Router, Babel, Express, Ant Design...

Getting start Clone this repo: $ git clone https://github.com/jovey-zheng/react-start-kit.git Install dependenices: $ npm i Start the project: $ npm

Jovey Zheng 109 Mar 1, 2022
Arco-design-pro - An out-of-the-box solution to quickly build enterprise-level applications based on Arco Design

Arco Design Pro An out-of-the-box solution to quickly build enterprise-level app

null 265 Dec 23, 2022
Locku-browser-extension - Simple Browser extension to save passwords across browsers

Locku A Simple browser extension for password management. Why another Password m

Solai Raj 3 Jul 27, 2022
ArtemisQL is a GraphQL migration and database visualizer tool that empowers developers to build GraphQL schemas with ease.

ArtemisQL A GraphQL migration tool and relational database visualizer ?? Overview ArtemisQL is an open-source web application providing a SQL (Postgre

OSLabs Beta 108 Sep 23, 2022
An online food delivery application using React.js, ES6, bootstrap5 and firebase

Yumito ( An online food delivery application ) In this project, one can login, register, follow the menu, go through the offers which the restaurant h

Uma 8 Dec 9, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 487 Jan 6, 2023
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 488 Sep 8, 2022
Click Memory Game (using React, running through Github)

Clicky Game Georgia Tech Boot Camp - Clicky Game - Assignment #15 React Github Game Instructions Try to click on every cartoon picture once. When you

Shannon Kendall 2 Aug 31, 2021
Ext-react - A starter repo for building browser extensions with React and Typescript

Web Extensions React starter A starter repo for building browser extensions with

Okanovic Dragan 38 Dec 19, 2022
A Demo SPA developed with React, ES6, Webpack (2.x), and Antd (1.0.1) 【move to react-seed】

Target 使用React技术栈开发SPA. Tech Stack UI库:React & React-Dom UI组件:Antd 路由:React-Router & History 框架:Reflux JS:ES6 样式:Less 图标:Antd自带/FontAwesome 动画:Animate

Jason Bai 515 Dec 1, 2022
Small ES6 Native Speed jQuery for Svelte, Vue3, React, Angular, and WEB

sQuery This is a Very Small ES6 Native Speed jQuery for Svelte, Vue3, React, Angular, and WEB. Are you fed up with the modern js frameworks? But you'r

Exis 2 Sep 24, 2022
This is a template repository to get up and running quickly with: Express, React, Jest, Docker, and Github Actions for CI/CD.

This is a template repository to get up and running quickly with: Express, React, Jest, Docker, and Github Actions for CI/CD.

Harrison (Harry) Cramer 15 Oct 25, 2022
A NextJS, Tailwind, TRPC, Prisma, and NextAuth Starter Project that makes getting an app up and running as easy as possible

A NextJS, Tailwind, TRPC, Prisma, and NextAuth Starter Project that makes getting an app up and running as easy as possible

Kelly Copley 41 Dec 15, 2022
Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Kai Hotz 239 Dec 29, 2022
Large SPA boilerplate use react redux webpack babel es6 express browsync nodemon...

React-workflow Why Large SPA application is hard to design, because a lot of things need to consider The boilerplate had solved the difficulty for

云霜儿 66 Mar 27, 2021
Large SPA boilerplate use react redux webpack babel es6 express browsync nodemon...

React-workflow Why Large SPA application is hard to design, because a lot of things need to consider The boilerplate had solved the difficulty for

云霜儿 66 Mar 27, 2021
CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

Malakhov Mikhail 4 May 24, 2022