A frontend framework for building admin SPAs on top of REST services, using React and Material Design.

Overview

admin-on-rest Build Status

A frontend Framework for building admin applications running in the browser on top of REST services, using ES6, React and Material Design. Open sourced and maintained by marmelab.


Admin-on-rest 1.x is in maintenance mode. Version 2.x lives at https://github.com/marmelab/react-admin.


Demo - Documentation - Releases - Support

admin-on-rest-demo

Features

  • Adapts to any REST backend
  • Complete documentation
  • Optimistic rendering (renders before the server returns)
  • Relationships (many to one, one to many)
  • Internationalization (i18n)
  • Conditional formatting
  • Themeable
  • Supports any authentication provider (REST API, OAuth, Basic Auth, ...)
  • Full-featured Datagrid (sort, pagination, filters)
  • Filter-as-you-type
  • Supports any form layout (simple, tabbed, etc.)
  • Data Validation
  • Custom actions
  • Large library of components for various data types: boolean, number, rich text, etc.
  • WYSIWYG editor
  • Customize dashboard, menu, layout
  • Super easy to extend and override (it's just React components)
  • Highly customizable interface
  • Can connect to multiple backends
  • Leverages the best libraries in the React ecosystem (Redux, redux-form, redux-saga, material-ui, recompose)
  • Can be included in another React app
  • Inspired by the popular ng-admin library (also by marmelab)

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.

Installation

Admin-on-rest is available from npm. You can install it (and its required dependencies) using:

npm install --save-dev admin-on-rest

Documentation

Read the Tutorial for a 15 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 React from 'react';
import { render } from 'react-dom';
import { simpleRestClient, Admin, Resource } from 'admin-on-rest';

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

render(
    <Admin restClient={simpleRestClient('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 admin-on-rest:

// in posts.js
import React from 'react';
import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, DisabledInput, TextInput, LongTextInput, DateInput } from 'admin-on-rest';
import BookIcon from 'material-ui/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>
            <DisabledInput source="id" />
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiLine: true }} />
            <LongTextInput source="body" />
            <DateInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
            <DisabledInput 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 }} />
            <LongTextInput source="body" />
            <TextInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
        </SimpleForm>
    </Create>
);

Does It Work With My REST API?

Yes.

Admin-on-rest uses an adapter approach, with a concept called REST client. Existing rest clients can be used as a blueprint to design your API, or you can write your own REST client to query an existing API. Writing a custom REST client is a matter of hours.

REST client architecture

See the REST clients documentation for details.

Batteries Included But Removable

Admin-on-rest is designed as a library of loosely coupled React components built on top of material-ui, in addition to controller functions implemented the Redux way. It is very easy to replace one part of admin-on-rest with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design.

Run the example

You can run the example app by calling:

npm install
make run

And then browse to http://localhost:8080/. The credentials are login/password

Contributing

Pull requests are welcome. 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.

You can run the tests (linting, unit and functional tests) by calling

make test

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

make prettier

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

make doc

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

Note: if you have added a section with heading to the docs, you also have to add it to docs/_layouts/default.html (the links on the left) manually.

If you are using admin-on-rest as a dependency, and if you want to try and hack it, here is the advised process:

# in myapp
# install admin-on-rest from GitHub in another directory
$ cd ..
$ git clone [email protected]:marmelab/admin-on-rest.git && cd admin-on-rest && make install
# replace your node_modules/admin-on-rest by a symbolic link to the github checkout
$ cd ../myapp
$ npm link ../admin-on-rest
# go back to the checkout, and replace the version of react by the one in your app
$ cd ../admin-on-rest
$ npm link ../myapp/node_modules/react
$ make watch
# in another terminal, go back to your app, and start it as usual
$ cd ../myapp
$ npm run

Tip: If you're on Windows and can't use make, try this Gist.

License

Admin-on-rest is licensed under the MIT Licence, sponsored and supported by marmelab.

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.

Issues
  • `FormField` causes infinite update loop when given non-primitive `defaultValue`

    `FormField` causes infinite update loop when given non-primitive `defaultValue`

    I'm using a following set-up (pseudo-code cut just to demonstrate the relevant part):

    <SimpleForm>
      <SelectArrayInput source="..." defaultValue={[]} />
    </SimpleForm>
    

    inside a (much) larger application.

    What you were expecting:

    It should work (render and allow interactions) :)

    What happened instead:

    Application crashes with the following error:

    Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    

    I tracked the problem to FormField, which performs exact equality comparison on defaultValue in componentWillReceiveProps and dispatches the initializeForm action when it detects a difference. The action then causes update of a major part of the app, including the field, and the cycle starts again.

    Environment

    • Admin-on-rest version: 1.4.1
    • React version: 16.4.0
    • Browser: Chrome 67.0.3396.87
    • Stack trace (in case of a JS error): not helpful (it ultimately crashes in Route, the update stack is short and without a trace of where the problem actually is)
    Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
        at invariant (invariant.js:42)
        at scheduleWork$1 (react-dom.development.js:16099)
        at Object.enqueueSetState (react-dom.development.js:11185)
        at Route.../../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:273)
        at Route.componentWillReceiveProps (Route.js:80)
        at callComponentWillReceiveProps (react-dom.development.js:11413)
        at updateClassInstance (react-dom.development.js:11605)
        at updateClassComponent (react-dom.development.js:13045)
        at beginWork (react-dom.development.js:13715)
        at performUnitOfWork (react-dom.development.js:15741)
    
    The above error occurred in the <Route> component:
        in Route (created by AdminRoutes)
        in Switch (created by AdminRoutes)
        in AdminRoutes (created by Connect(AdminRoutes))
        in Connect(AdminRoutes) (created by getContext(Connect(AdminRoutes)))
        in getContext(Connect(AdminRoutes)) (created by Route)
        in Route (created by Admin)
        in Switch (created by Admin)
        in Router (created by ConnectedRouter)
        in ConnectedRouter (created by Admin)
        in TranslationProvider (created by withContext(TranslationProvider))
        in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider)))
        in Connect(withContext(TranslationProvider)) (created by Admin)
        in Provider (created by Admin)
        in Admin (created by withContext(Admin))
        in withContext(Admin) (created by DefaultAdmin)
        in  ... (app layout)
    
    opened by hon2a 6
  • ReferenceManyField not rendering data after first load (cache issue?)

    ReferenceManyField not rendering data after first load (cache issue?)

    Porting issue #1749 from react-admin, initially reported by evancorl

    What you were expecting: When my restClient returns a response, the ReferenceManyField should re-render with the fetched data.

    What happened instead: When my restClient returns a response, the ReferenceManyField occasionally doesn't re-render with the fetched data. Instead, it continues to display the loading bar. This can be directly traced to the ids prop being undefined.

    Steps to reproduce: The pattern I've noticed: the first attempt at loading a ReferenceManyField renders properly. Any subsequent loads of that ReferenceManyField will not be rendered properly.

    In other words, I first load Dealer 1 with referenced salespeople. Loading Dealer 2 (or Dealer 3, Dealer 4, etc.) will not render the salespeople. Going back and loading Dealer 1 again, however, will render the salespeople.

    My guess is this is some sort of issue related to the AOR cache. Notice how the id prop here is undefined-undefined-objectObject-63822:

    referencemanyfield - broken

    Related code: Here is my Edit component for Dealers:

    export const DealerEdit = props => (
      <Edit {...props} title="Edit Dealer">
        <SimpleForm>
          <TextInput source="name" validate={required} />
          <ReferenceManyField
            reference="salespeople"
            target="dealerId"
            label="Salespeople"
          >
            <Datagrid>
              <TextField source="firstName" label="First Name" />
              <TextField source="lastName" label="Last Name" />
              <EmailField source="email" />
              <DateField source="createdAt" label="Created" />
              <DateField source="updatedAt" label="Updated" />
              <EditButton />
            </Datagrid>
          </ReferenceManyField>
        </SimpleForm>
      </Edit>
    );
    

    And here is the data returned from my restClient (using Apollo under the hood):

    // GET_ONE (Dealer)
    {
      "data": {
        "_id": "5ac7df3b5bc8ae1454ebd549",
        "id": "5ac7df3b5bc8ae1454ebd549",
        "name": "Dealer 1",
        "__typename": "Dealer",
      }
    }
    
    // GET_MANY_REFERENCE (Salespeople)
    {
      "data": [
        {
          "_id": "5ad3b59fc7d879946ca7e5bc",
          "id": "5ad3b59fc7d879946ca7e5bc",
          "firstName": "John",
          "lastName": "Salesman",
          "email": "[email protected]",
          "createdAt": "2018-04-15T20:27:11.924Z",
          "updatedAt": "2018-04-16T21:35:31.259Z",
          "__typename": "DealerUser",
        }
      ],
      "total": 1
    }
    

    Environment

    • Admin-on-rest version: 1.4.0
    • React version: 16.3.1
    • Browser: Chrome 65.0.3325.181 (Mac)
    bug 
    opened by fzaninotto 2
  • When will Material UI be updated to version 1?

    When will Material UI be updated to version 1?

    The current version of Material UI, while technically still in beta, is what is recommended to use in production (according to their site).

    When will we see an upgrade to v1? The problem is the current version being used in Admin on Rest is too restrictive to properly brand.

    Thanks.

    opened by jordanranson 2
  • different api call

    different api call

    Hi,

    I'm using another api to list in Datagrid. But when I call it I'm getting an error as follows

    test

    The api that I use; https://reqres.in/api/products

    Why do i get this error? Can you help me? Thank you

    opened by muticansel 2
  • How to provide a custom redirect to a SimpleForm inside Edit ?

    How to provide a custom redirect to a SimpleForm inside Edit ?

    After an edit, I follow the convention to redirect on the list.

    However, I am in a case where I need to provide additional parameters in the list URL.

    Is there a way to "cheat" on SimpleForm/Edit to customize the redirect ?

    Here is the relevant part of my code :

    const ProviderUserEditActions = ({ basePath, data }) => {
      if (! data) return null
      return (
        <CardActions style={cardActionStyle}>
            <ListButton basePath={basePath+'?'+queryString.stringify({providerId:data.providerId, providerName:data.providerName})} />
            <RefreshButton />
        </CardActions>
      );
    }
    
    export const ProviderUserEdit = (props) => (
        <Edit actions={<ProviderUserEditActions/>} title={<ProviderUserEditTitle />} {...props}>
            {/*redirect=false will cause the loosing of the URL parameters :(
              but this is the "least worst", because otherwise it would redirect to
              'list' but without URL parameters it will completely crash...
              we hope that someday we will be able to provide our own redirect
              function
              */}
            <SimpleForm redirect={false}>
                <TextInput source="name" />
                <TextInput source="email" />
                <TextInput source="phone" />
                <BooleanInput source="activated" />
            </SimpleForm>
        </Edit>
    );
    
    opened by christopheblin 2
  • Handling server errors with SimpleForm

    Handling server errors with SimpleForm

    Hi,

    I'm trying to handle server validation errors once submission of a SimpleForm has been done.

    My form is quite easily created:

            <SimpleForm onSubmit={submitResults}>
                <UserForm />
            </SimpleForm>
    

    And I have a simple way to throw a submission error, not calling the server for the moment:

    const submitResults = (values) => {
        throw new SubmissionError({firstname: "Firstname is wrong", lastname: "Lastname is not good", _error: "Submit Failed"});
    };
    

    According to https://marmelab.com/admin-on-rest/CreateEdit.html#validation and Redux Form, this should be fine: https://redux-form.com/6.5.0/examples/submitvalidation/. However, I don't enter submitResults function, and the submission is made to the server which returns a 401 status which never gets understood.

    What am I doing wrong?

    Thanks, Nicolas

    opened by nicolaskern 2
  • The tabs do not rerender on state change

    The tabs do not rerender on state change

    The tab list only changes on first rendering of the UI. The changs of state don't cause proper rendering.

    I would expect following (pseudo)code to result in one of tabs showing if and onli if this.state.isAdmin is true, however it only depends on the initial value of this state field (the isAdmin is loaded asynchronously).

    <Admin ...>
        <Resource ... />
        {this.state.isAdmin ? <Resource ...> : null}
    </Admin>
    

    The title prop of component however rerenders correctly, and also console.logs display proper, updated state.

    • Admin-on-rest version: 1.4.1
    • React version: 16.2.0
    • Browser: Firefox 61.0.1 (64-bit)
    opened by jmarucha 2
  • Can't create a production build

    Can't create a production build

    What you were expecting: I create a new app using create-react-app as tutorial says. I run yarn build and production build gets created.

    What happened instead: I run yarn buildand the following error appears:

    $ yarn build
    yarn run v1.5.1
    $ react-scripts build
    Creating an optimized production build...
    Failed to compile.
    
    Failed to minify the code from this file:
    
     	./node_modules/admin-on-rest/src/actions/uiActions.js:3
    
    Read more here: http://bit.ly/2tRViJ9
    
    error An unexpected error occurred: "Command failed.
    Exit code: 1
    Command: sh
    Arguments: -c react-scripts build
    Directory: /Users/pallaric/Documents/Mobile/projects/training/test-admin
    Output:
    ".
    info If you think this is a bug, please open a bug report with the information provided in "/Users/pallaric/Documents/Mobile/projects/training/test-admin/yarn-error.log".
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    
    

    Steps to reproduce: Follow the tutorial, and run yarn build. I am importing import { refreshView as refreshViewAction } from 'admin-on-rest/src/actions/uiActions';

    Versions used:

        "admin-on-rest": "^1.4.0",
        "react": "^16.3.0",
        "react-dom": "^16.3.0",
        "react-scripts": "1.1.1"
    
    opened by RPallas92 1
  • Update RestClients.md

    Update RestClients.md

    Just to keep consistency compared to the code right above (addUploadCapabilities).

    opened by bcgianni 1
  • Upgrade to Angular 6

    Upgrade to Angular 6

    Upgrade to Angular 6

    opened by klihelp 1
  • [RFR] Fix form unmount issues

    [RFR] Fix form unmount issues

    it's the same fix as on react-admin repo

    fixes form's clearing up values on navigation

    opened by natrim 0
  • ReferenceInput not triggering

    ReferenceInput not triggering "waiting" state after first load even when matchingReferences not yet loaded

    When pre-populating a saved value, ReferenceInput getDataStatus() will only enter the "waiting" state when matchingReferences is not set.

    But on the second load of a ReferenceInput it can never enter waiting state because matchingReferences is now set.

    On the second load, if the new value to be pre-populated is not already in matchingReferences then the field SHOULD enter the waiting state until it is fetched, but it will not enter the waiting state so it renders prematurely.

    Related code:

    Existing code in ReferenceInput:getDataStatus()

    waiting:
                (input.value && selectedReferenceError && !matchingReferences) ||
                (!input.value && !matchingReferences),
    

    Suggested alternative:

    waiting:
                (input.value && selectedReferenceError) ||
                (!input.value && !matchingReferences),
    

    What you were expecting: ReferenceInput+Autocomplete should always prepopulate with saved reference value and should be able to enter a waiting state even when some matchingReferences have been loaded if the input.value is not found in matchingReferences.

    What happened instead: Viewing a record with a saved value pre-populates correctly initially. Switching to another record of the same type will not pre-populate the value if the value is not coincidentally already in matchingReferences.

    AutocompleteInput is particularly susceptible to this because often the loaded value will not already be present in matchingReferences.

    Steps to reproduce:

    • Say we have a resource with a value controlled with ReferenceInput+AutocompleteInput.
    • Say there are two existing records:
      • Record 1 has value X
      • Record 2 has value Y
    • View Record 1 the value X pre-populates correctly into AutocompleteInput.
    • View Record 2 the value Y will not be found in matchingReferences so the field should enter the waiting state while the reference is fetched. Once fetched it should then pre-populate Y into AutocompleteInput.
    • However, when viewing Record 2 the value Y does not enter the waiting state, and does not pre-poulate and the dropdown shows the aor.input.references.single_missing error.

    Environment

    • Admin-on-rest version: latest
    opened by python1981 0
  • BooleanInput's defaultValue of false does not persist on initial load for validate function

    BooleanInput's defaultValue of false does not persist on initial load for validate function

    What you were expecting: ex. <BooleanInput label="OnOrOff" source="example" defaultValue={false} /> Setting defaultValue on BooleanInput component to false will yield {value: false} in validate function. Fields with defaultValue should be set before validate function runs.

    What happened instead: In: <BooleanInput label="OnOrOff" source="example" defaultValue={false} /> yields: {} in validate function. Removing defaultValue prop yields same result. Setting defaultValue={true} yields expected result {example: true} Toggling the BooleanInput field on and then off yields expected result {value: false} Steps to reproduce: Create a simple form. Console.log values in validateForm

    const validateForm => values => {
    console.log('values', values) // <- will yield empty object for boolean fields that have not been toggled
    }
    
    <Create {...props}>
         <SimpleForm submitOnEnter={false} validate={validateForm}>
           <BooleanInput label="Deletion" source="example" defaultValue={false} />
         </SimpleForm>
       </Create>
    

    See: https://codesandbox.io/s/9856oq8l0p Click + and view consoled values.

    Environment

    • Admin-on-rest version: 1.4.0
    • React version: ^15
    • Browser: Chrome
    opened by dotexe0 0
  • fix infinite loading

    fix infinite loading

    fixes #17

    opened by ptcc 2
  • Infinite Loading

    Infinite Loading

    What you were expecting: When a request gets canceled it should allways dispatch a FETCH_CANCEL action, to decrease the loading count.

    What happened instead: When two requests that have {cancelPrevious: true} get fired simultaneously, the FETCH_START for both gets dispatched, one of them gets canceled, but the corresponding FETCH_CANCEL never gets dispatched. This makes the loading count become locked at a greater than 0 value forever.

    Steps to reproduce: dispatch a crudGetOne and a crudGetList simultaneously (can be for diferent resources).

    Environment

    • Admin-on-rest version: 1.4.*
    opened by ptcc 0
  • Disable translate

    Disable translate

    In edit form for each custom input appear on console the next warning:

    Warning: Missing translation for key "RecycleItem"

    I did not find an option to disable translate

    Thanks.

    opened by bertus193 0
  • ReferenceArrayField not setting setSort

    ReferenceArrayField not setting setSort

    try example from doc: https://marmelab.com/admin-on-rest/Fields.html#referencearrayfield

    the one with datagrid

    when you click on column header you get Uncaught TypeError: _this.props.setSort is not a function

    ie. ReferenceArrayField is not setting setSort

    ReferenceArrayField needs to support sort or add checks in DataGrid to stop sorting if no setSort set

    opened by natrim 0
  • Update Authentication.md

    Update Authentication.md

    params.message.status is undefined

    opened by alihesari 0
  • SelectArrayInput component required validation not working

    SelectArrayInput component required validation not working

    What you were expecting:

    1. I have two fields name called 'Name', 'City'. Here both fields are mandatory.
    2. Name is String & City is Array where I could choose multiple value.
    3. Name field used the 'TextInput' & City field used the 'SelectArrayInput' to choose multiple value.
    4. If I lose mouse focus on either field with nothing entered in fields, it should display error message like 'This field is required'.

    What happened instead:

    1. When I lose focus from 'Name' field, it's displays error message.
    2. But I lose focus from 'City' fields without choose any value, It does not display any error message.

    Related code:

    const validateUserCreation = (values) => {
        const errors = {};
        if (!values.firstName) {
            errors.firstName = ['The firstName is required'];
        }
        if (!values.cities) {
            errors.cities= ['The city is required'];
        }
        return errors
    };
    
    export const UserCreate = (props) => (
        <Create {...props}>
            <SimpleForm validate={validateUserCreation}>
                <TextInput label="First Name" source="firstName" />
                <SelectArrayInput label="City" source="cities" choices={[
        { id: 'us', name: 'US' },
        { id: 'canada', name: 'Canada' }
    ]} />
            </SimpleForm>
        </Create>
    );
    

    Environment

    • admin-on-rest - 1.3.3 version
    opened by santhosh1190 0
  • AutocompleteInput text not shown on edit

    AutocompleteInput text not shown on edit

    Porting issue #1578 from react-admin, initially reported bynatrim.

    after merging #1525 the AutocompleteInput searchText is sometimes not shown (mostly after moving mouse to address bar and reloading page by clicking in it and pressing enter)

    managed to fix it by adding componentDidMount

      componentDidMount() {
        // delay this
        window.setTimeout(() => {
          this.setSearchText(this.props);
        }, 100);
      }
    

    but that is probably not the best solution

    (edit: using aor 1.4.0 with manually merged #1525 and react 0.16.2 )

    bug 
    opened by fzaninotto 0
Releases(v1.3.0)
  • v1.3.0(Apr 17, 2018)

    • Add permissions handling (djhi)
    • Add Not Found page (fzaninotto)
    • Add support for layoutless custom routes (marcw)
    • Add support for custom validator messages (fzaninotto)
    • Add support for nested filter object (mtakayuki)
    • Add response body to HttpError (marcw)
    • Add ability to refresh views using a redux action (djhi)
    • Add previousData to crudDelete payload (grahamlyus)
    • Add greek translation (zifnab87)
    • Add Ukrainian translation (vitivs)
    • Upgrade dependencies (MUI 0.19, react in peer dependencies) (djhi)
    • Update the redux state structure to avoid name conflicts (lutangar)
    • Update code formatting standard (prettier) (fzaninotto)
    • Fix query string builder in REST clients (mtakayuki)
    • Fix webpack file present in root directory (fzaninotto)
    • Fix forms default values handling (djhi)
    • Fix <SelectInput> with allowEmpty throws key-warning (fab1an)
    • Fix onMenuTap warning on medium and larger devices (jf248)
    • Fix links in documentation (Phocea)
    Source code(tar.gz)
    Source code(zip)
  • v1.3.1(Apr 17, 2018)

    • Fix Delete actions fails on IE11 (fzaninotto)
    • Fix npm package contains files from previous builds (ArnaudD)
    • Fix default values handling for deep paths with dot notation (djhi)
    • Fix alwaysOn filters defaultValue being ignored (djhi)
    • Fix missing import in Authorization documentation (Phocea)
    • Fix <BooleanInput> onChange with false value (djhi)
    • Fix missing refresh prop in <List> component (djhi)
    • Fix date filters (djhi)
    • Fix typo in custom actions documentation (RWOverdijk)
    Source code(tar.gz)
    Source code(zip)
  • v1.3.2(Apr 17, 2018)

    • Fix JS error on <WithPermission> (fzaninotto)
    • Fix tag filter in example post list (ThieryMichel)
    • Fix bad links to Authorization documentation sections (djhi)
    • Fix mention about a <ReferenceManyInput> (djhi)
    • Fix multiple <ReferenceManyField> on same resource with different filter (ThieryMichel)
    • Fix trailing slash in <EditButton> link (ThieryMichel)
    • Fix Optimistic rendering of List may create errors due to outdated data (ThieryMichel)
    • Fix documentation about onTouchTap, replaced by onClick (djhi)
    • Fix List button displayed in show view even when no List component defined (ThieryMichel)
    • Fix <AutocompleteInput> can not be changed once a value is selected (ThieryMichel)
    • Fix <DateInput> Filter first passed as String, then as Date (ThieryMichel)
    • Fix <FilterForm> is not themable (djhi)
    • Fix typo in <Admin> component documentation (than)
    • Fix <FileInputPreview> is not themable (djhi)
    • Fix Custom App documentation (kopax)
    • Fix missing refresh of <RadioButtonGroupInput> (michaelluk)
    • Remove mention of aor-permissions from documentation (djhi)
    • Fix performance optimization in <CreateButton> (natrim)
    • Add mentions of aor-embedded-array and aor-rest-client-router packages to the doc (MhdSyrwan)
    Source code(tar.gz)
    Source code(zip)
  • v1.3.3(Apr 17, 2018)

    • Add aor-xmysql to the list of REST clients (soaserele)
    • Add Slovenian translation (ariskemper)
    • Fix wrong code sample in Translations docs (fzaninotto)
    • Add getResources function to allow ressource injection in custom components (fzaninotto)
    • Fix typo in Actions documentation (xiaomingplus)
    • Add mention of ra-component-factory to the list of related packages (zifnab87)
    • Fix exception when using React 16 and hot reloading (natrim)
    • Fix custom menu documentation (fzaninotto)
    • Fix installation documentation (faviouz)
    • Fix typo in English translations (netsgnut)
    • Add a link to the updated Hebrew translations (motro)
    • Fix linting problems (fzaninotto)
    • Fix missing import in <List> documentation (clementtalleu)
    • Fix Refresh button does not refresh data in <ReferenceManyField> (fzaninotto)
    • Fix refreshView is undefined when using custom actions in list (natrim)
    Source code(tar.gz)
    Source code(zip)
  • v1.3.4(Apr 17, 2018)

    • Add Croatian translation (ariskemper)
    • Add Indonesian translation (ronadi)
    • Add Arabic translation (aymendhaya)
    • Add Finnish translation (Joni-Aaltonen)
    • Fix spelling of Labeled in documentation (jyash97)
    • Fix documentation for Writing Actions (danyalaytekin)
    • Fix check that window exists before checking for devToolsExtension (twDuke)
    • Fix missing key warning for SaveButton (MadalenaGoncalves)
    • Fix RestClient example in documentation (alexanderankin)
    • Fix documentation menu on mobile (djhi)
    • Add shadow under doc menu bar on mobile (djhi)
    • Fix SelectArrayInput by upgrade material-ui-chip-input (djhi)
    • Fix Bottom Toolbars on mobile (djhi)
    • Fix documentation, Prop name is validate not validation (alauper)
    • Fix AutocompleteInput does not render text for existing value on initial render (hasghari)
    • Fix BooleanInput warning about uncontrolled to controlled component (djhi)
    • Fix title is not updated when record changes (djhi)
    • Fix vertical scroll issue on page on IE11 (activist)
    Source code(tar.gz)
    Source code(zip)
  • v1.4.0(Apr 17, 2018)

    • Add options support in DisabledInput (afilp)
    • Add Slovak translation (zavadpe)
    • Add a FAQ entry about unique child key in datagrid (djhi)
    • Add documentation about dateInput and timezones (alexisjanvier)
    • Update example about addUploadCapabilities (alexisjanvier)
    • Update extraction of status for AUTH_ERROR in the documentation (zifnab87)
    • Update documentation and examples to use standard es6 (djhi)
    • Update CreateEdit documentation for number validation (afilp)
    • Fix validation custom messages so that those without translation don't add warnings (djhi)
    • Fix children are filtered when mapping on them (djhi)
    • Fix redirection to correct page after Delete (alexisjanvier)
    • Fix warnings in React 16 (djhi)
    • Fix Edit view refresh does not cancel changes (djhi)
    • Fix form default values can't be changed once mounted (djhi)
    • Fix link color in reference field (djhi)
    • Fix and cleanup example app code (djhi)
    • Fix default value for filter when source is a path with dot (djhi)
    • Fix WithPermissionsFilteredChildren should not put regular children in state (djhi)
    • Fix SimpleShowLayout should handle null children (afilp)
    • Fix Handle element cannot be fetched error (alexisjanvier)
    • Fix List default pagination to avoid displaying NaN (afilp)
    • Fix SelectArrayInput (djhi)
    • Fix setState typo in SelectArrayInput (natrim)
    • Fix example validation (alauper)
    • Fix outdated RefreshButton usage (alexisjanvier)
    • Fix custom routes handling (djhi)
    • Fix typo in example (clementtalleu)
    Source code(tar.gz)
    Source code(zip)
  • v1.4.1(Apr 17, 2018)

    • Add addLabel default prop in custom Field documentation (jorrit)
    • Add Catalan translation (fzaninotto)
    • Add aor-cli package to Ecosystem documentaiton (aymendhaya)
    • Add DynamoDb to RestClients (yonahforst)
    • Update redux-form to 7.1.X (mauchede)
    • Update link to GraphQL client (romainquellec)
    • Fix NumberInput returns String value (fzaninotto)
    • Fix boolean input label color does not use theme (fzaninotto)
    • Fix login layout in IE 11 (pavyarov)
    • Fix tutorial usage of ReferenceInput for Create (djhi)
    • Fix GET_MANY_REFERENCE example in RestClients documentation (Kiailandi)
    • Fix custom layout documentation (djhi)
    • Fix AutocompleteInput (djhi)
    Source code(tar.gz)
    Source code(zip)
Modular and customizable Material Design UI components for the web

Material Components for the web Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX

Material Components 15.8k Oct 13, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 72.2k Oct 13, 2021
A Material-UI File Upload Dropzone

A Material-UI File Upload Dropzone

pandemicode.dev 1 Sep 18, 2021
Free and Open Source Admin for Tailwind CSS and React based on Google's Material Design.

Material Tailwind Dashboard React Material Tailwind Dashboard React is a free Admin Template based on two popular front-end technologies: Tailwind CSS

Creative Tim 29 Oct 13, 2021
☄️React Material Admin is a React template built with Material-UI

React Material Admin — Material-UI Dashboard Template

Flatlogic 1.2k Oct 17, 2021
Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard Free React Typescript Admin Dashboard Template built with Material-UI This free and open source admi

Horia S 27 Oct 8, 2021
Introduce users to your app with this Material-style carousel.

Material AutoRotatingCarousel So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Mater

Wertarbyte 419 Oct 3, 2021
Material style image with loading animation

Material UI Image Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern su

Wertarbyte 202 Sep 26, 2021
Stateless UI components for react that follow material design

Material Components Stateless UI components for react that follow material design. Introduction material-components is a library of React (15.0.0) use

Garth Williams 99 Sep 9, 2021
React Bootstrap with Material Design - Powerful and free UI KIT

React Bootstrap with Material Design Built with React and Bootstrap 4. Absolutely no jQuery. 400+ material UI elements, 600+ material icons, 74 CSS an

MDBootstrap 1.2k Oct 10, 2021
A set of React components implementing Google's Material Design specification with the power of CSS Modules

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

React Toolbox 8.7k Oct 10, 2021
React Component that implements a speed dial using Material-UI.

react-speed-dial React Component that implements a speed dial using Material-UI. For Material-UI v1 use material-ui-speed-dial like inbox toolbox vers

Simon Mollweide 57 Oct 2, 2021
Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

null 4.5k Oct 12, 2021
React Material Design Icons – built with Pixo, Styled Components, and Styled System

React Material Design Icons Built with Pixo, Styled Components, and Styled System https://jxnblk.com/rmdi npm i rmdi // import icons individually for

Brent Jackson 132 Oct 19, 2020
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 React React 17 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBReact 5 Demo 500+ material UI components Super simple,

MDBootstrap 1.2k Oct 10, 2021
A customizable floating action button menu that follows material design

react-floating-button-menu A customizable floating action button menu Inspired by react-material-floating-button Install npm install --save react-floa

Alucard 33 Sep 1, 2021
Material design for react, powered by materializecss

react-materialize Material design components for react, powered by materializecss. Install npm install [email protected] npm install react-material

React Materialize 1.4k Oct 18, 2021
Material Design component library for Mithril and React

Polythene Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, noti

Arthur Clemens 585 Oct 10, 2021
Essence - The Essential Material Design Framework

#[Essence] - The Essential Material Design Framework About Essence Essence is a CSS framework that implements the guidelines from Google Material Desi

Evo Forge 416 Oct 13, 2021