react-admin

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

Showing:

Popularity

Downloads/wk

47.2K

GitHub Stars

18.1K

Maintenance

Last Commit

3d ago

Contributors

526

Package

Dependencies

17

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Reviews

Average Rating

4.4/543
Read All Reviews
jrbgit
amitach
Emad-salah
nikhil2882
zek0faws
sayak-sarkar
ProgrammerIsLife

Top Feedback

10Great Documentation
7Highly Customizable
5Performant
4Easy to Use
3Poor Documentation
2Hard to Use

Readme

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

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.

Rate & Review

Great Documentation10
Easy to Use4
Performant5
Highly Customizable7
Bleeding Edge1
Responsive Maintainers1
Poor Documentation3
Hard to Use2
Slow0
Buggy0
Abandoned0
Unwelcoming Community1
100
jrbgitEarth7 Ratings5 Reviews
jr00t
3 months ago
Great Documentation
Performant
Highly Customizable

Easy way to jump start your next admin panel. Simple yet powerful design that is easy to use. Works great for building an admin interface for your project or for a customer. Demos of the package are great and it's east to get started. It comes with a bunch of great packages already installed to get you going. There is good documentation and a lot of tutorials on the web.


2
sajinimarychandy
alkonaesc
Amit AcharyaBangalore55 Ratings52 Reviews
Technical -- Broad web development experience. Very strong in Ruby and Ruby on Rails . Excited about systems that keep people safe and secure.
5 months ago
Great Documentation
Hard to Use
Highly Customizable

I used this profesionally for a client and got an admin panel for the catalog upload page for a book website up in no time. I used Material UI out of the box and didn't have to customize much and the existing APIs worked like a charm. However I did get stuck when I had to build some custom pages and that requires some effort. Overall good for small pages and admins with obvious filters. However for complicated admin pages you would have to implement your own or dive deep to get the results.


0
Emad Kheir121 Ratings132 Reviews
Full-stack Software Engineer
1 month ago
Hard to Use
Poor Documentation

A UI Component library that's simple to integrate for sites that are meant to be used by businesses and not normal users. The template's design though looks a bit plain and boring though and it's really difficult to modify any part of the UI to look different than what they have in the theme, so if you need to add any custom UI element to it, it will take you some time to deal with some of the CSS quirks the plugin has


0
nikhil288248 Ratings56 Reviews
9 months ago
Easy to Use
Great Documentation

if you need a basic and quick solution to build an admin panel. this is going to solve. you need only rest API to connect and all done. beware your API should have a basic standard implementation. overtime I needed to create my own admin but at first, this did its job. Material UI is a plus in this project and easy to use, but don't hope for too much customization


0
Christopher MAUGIS/France/Paris/Zek0Faws28 Ratings33 Reviews
I like new stuff.
September 12, 2020
Great Documentation
Highly Customizable
Responsive Maintainers
Performant

I needed to implement an administrator connected to a REST API (using the API platform). The React administrator is easy to set up and connecting to your API is easy. Of course, React Admin needs your API to meet standards, but once that's done, you can do some magic. Implemented with React and Material-UI this is the best admin I have ever found


0

Alternatives

svelteCybernetically enhanced web apps
User Rating
4.7/ 5
310
Top Feedback
85Performant
81Great Documentation
78Easy to Use
GitHub Stars
51K
Weekly Downloads
202K
solid-jsA declarative, efficient, and flexible JavaScript library for building user interfaces.
User Rating
4.5/ 5
15
Top Feedback
10Performant
6Easy to Use
6Poor Documentation
GitHub Stars
12K
Weekly Downloads
17K
inferno:fire: An extremely fast, React-like JavaScript library for building modern user interfaces
User Rating
4.7/ 5
23
Top Feedback
4Performant
3Great Documentation
3Easy to Use
GitHub Stars
15K
Weekly Downloads
47K
vue🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
User Rating
4.6/ 5
2,053
Top Feedback
244Great Documentation
225Easy to Use
180Performant
GitHub Stars
190K
Weekly Downloads
3M
ember-sourceEmber.js - A JavaScript framework for creating ambitious web applications
User Rating
3.7/ 5
24
Top Feedback
4Poor Documentation
3Great Documentation
3Easy to Use
GitHub Stars
22K
Weekly Downloads
178K
See 19 Alternatives