1 | # react-admin
|
2 |
|
3 | A frontend Framework for building admin applications running in the browser on top of REST/GraphQL services, using ES6, [React](https://facebook.github.io/react/) and [Material Design](https://material.io/). Open sourced and maintained by [marmelab](https://marmelab.com/).
|
4 |
|
5 | [Demo](https://marmelab.com/react-admin-demo/) - [Documentation](https://marmelab.com/react-admin/) - [Releases](https://github.com/marmelab/react-admin/releases) - [Support](http://stackoverflow.com/questions/tagged/react-admin)
|
6 |
|
7 | [![react-admin-demo](https://marmelab.com/react-admin/img/react-admin-demo-still.png)](https://vimeo.com/205118063)
|
8 |
|
9 | ## Features
|
10 |
|
11 | * Adapts to any backend (REST, GraphQL, SOAP, etc.)
|
12 | * Complete documentation
|
13 | * Optimistic rendering (renders before the server returns)
|
14 | * Relationships (many to one, one to many)
|
15 | * Internationalization (i18n)
|
16 | * Conditional formatting
|
17 | * Themeable
|
18 | * Supports any authentication provider (REST API, OAuth, Basic Auth, ...)
|
19 | * Full-featured Datagrid (sort, pagination, filters)
|
20 | * Filter-as-you-type
|
21 | * Supports any form layout (simple, tabbed, etc.)
|
22 | * Data Validation
|
23 | * Custom actions
|
24 | * Large library of components for various data types: boolean, number, rich text, etc.
|
25 | * WYSIWYG editor
|
26 | * Customize dashboard, menu, layout
|
27 | * Super easy to extend and override (it's just React components)
|
28 | * Highly customizable interface
|
29 | * Can connect to multiple backends
|
30 | * Leverages the best libraries in the React ecosystem (Redux, redux-form, redux-saga, material-ui, recompose)
|
31 | * Can be included in another React app
|
32 | * Inspired by the popular [ng-admin](https://github.com/marmelab/ng-admin) library (also by marmelab)
|
33 |
|
34 | ## Versions In This Repository
|
35 |
|
36 | * [master](https://github.com/marmelab/react-admin/commits/master) - commits that will be included in the next _patch_ release
|
37 |
|
38 | * [next](https://github.com/marmelab/react-admin/commits/next) - commits that will be included in the next _major_ or _minor_ release
|
39 |
|
40 | 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**.
|
41 |
|
42 | ## Installation
|
43 |
|
44 | React-admin is available from npm. You can install it (and its required dependencies)
|
45 | using:
|
46 |
|
47 | ```sh
|
48 | npm install --save-dev react-admin
|
49 | ```
|
50 |
|
51 | ## Documentation
|
52 |
|
53 | Read the [Tutorial](http://marmelab.com/react-admin/Tutorial.html) for a 15 minutes introduction. After that, head to the [Documentation](http://marmelab.com/react-admin/index.html), or checkout the [source code of the demo](https://github.com/marmelab/react-admin-demo) for an example usage.
|
54 |
|
55 | ## At a Glance
|
56 |
|
57 | ```jsx
|
58 | // in app.js
|
59 | import React from 'react';
|
60 | import { render } from 'react-dom';
|
61 | import { Admin, Resource } from 'react-admin';
|
62 | import restProvider from 'ra-data-simple-rest';
|
63 |
|
64 | import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
|
65 |
|
66 | render(
|
67 | <Admin dataProvider={restProvider('http://localhost:3000')}>
|
68 | <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon}/>
|
69 | </Admin>,
|
70 | document.getElementById('root')
|
71 | );
|
72 | ```
|
73 |
|
74 | 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:
|
75 |
|
76 | ```jsx
|
77 | // in posts.js
|
78 | import React from 'react';
|
79 | import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, DisabledInput, TextInput, LongTextInput, DateInput } from 'react-admin';
|
80 | export PostIcon from '@material-ui/core/svg-icons/action/book';
|
81 |
|
82 | export const PostList = (props) => (
|
83 | <List {...props}>
|
84 | <Datagrid>
|
85 | <TextField source="id" />
|
86 | <TextField source="title" />
|
87 | <DateField source="published_at" />
|
88 | <TextField source="average_note" />
|
89 | <TextField source="views" />
|
90 | <EditButton basePath="/posts" />
|
91 | </Datagrid>
|
92 | </List>
|
93 | );
|
94 |
|
95 | const PostTitle = ({ record }) => {
|
96 | return <span>Post {record ? `"${record.title}"` : ''}</span>;
|
97 | };
|
98 |
|
99 | export const PostEdit = (props) => (
|
100 | <Edit title={<PostTitle />} {...props}>
|
101 | <SimpleForm>
|
102 | <DisabledInput source="id" />
|
103 | <TextInput source="title" />
|
104 | <TextInput source="teaser" options={{ multiLine: true }} />
|
105 | <LongTextInput source="body" />
|
106 | <DateInput label="Publication date" source="published_at" />
|
107 | <TextInput source="average_note" />
|
108 | <DisabledInput label="Nb views" source="views" />
|
109 | </SimpleForm>
|
110 | </Edit>
|
111 | );
|
112 |
|
113 | export const PostCreate = (props) => (
|
114 | <Create title="Create a Post" {...props}>
|
115 | <SimpleForm>
|
116 | <TextInput source="title" />
|
117 | <TextInput source="teaser" options={{ multiLine: true }} />
|
118 | <LongTextInput source="body" />
|
119 | <TextInput label="Publication date" source="published_at" />
|
120 | <TextInput source="average_note" />
|
121 | </SimpleForm>
|
122 | </Create>
|
123 | );
|
124 | ```
|
125 |
|
126 | ## Does It Work With My API?
|
127 |
|
128 | Yes.
|
129 |
|
130 | 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.
|
131 |
|
132 | ![Data Provider architecture](https://marmelab.com/react-admin/img/data-provider.png)
|
133 |
|
134 | See the [Data Providers documentation](https://marmelab.com/react-admin/DataProviders.html) for details.
|
135 |
|
136 | ## Batteries Included But Removable
|
137 |
|
138 | React-admin is designed as a library of loosely coupled React components built on top of [material-ui](http://v1.material-ui.com/), in addition to controller functions implemented the Redux way. 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.
|
139 |
|
140 | ## Run the example
|
141 |
|
142 | You can run the example app by calling:
|
143 |
|
144 | ```sh
|
145 | npm install
|
146 | make run
|
147 | ```
|
148 |
|
149 | And then browse to [http://localhost:8080/](http://localhost:8080/).
|
150 | The credentials are **login/password**
|
151 |
|
152 | ## Contributing
|
153 |
|
154 | Pull requests are welcome. You must follow the coding style of the existing files (based on [prettier](https://github.com/prettier/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.
|
155 |
|
156 | You can run the tests (linting, unit and functional tests) by calling
|
157 |
|
158 | ```sh
|
159 | make test
|
160 | ```
|
161 |
|
162 | If you have coding standards problems, you can fix them automatically using `prettier` by calling
|
163 |
|
164 | ```sh
|
165 | make prettier
|
166 | ```
|
167 |
|
168 | If you want to contribute to the documentation, install jekyll, then call
|
169 |
|
170 | ```sh
|
171 | make doc
|
172 | ```
|
173 |
|
174 | And then browse to [http://localhost:4000/](http://localhost:4000/)
|
175 |
|
176 | *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.
|
177 |
|
178 | If you are using react-admin as a dependency, and if you want to try and hack it, here is the advised process:
|
179 |
|
180 | ```sh
|
181 | # in myapp
|
182 | # install react-admin from GitHub in another directory
|
183 | $ cd ..
|
184 | $ git clone git@github.com:marmelab/react-admin.git && cd react-admin && make install
|
185 | # replace your node_modules/react-admin by a symbolic link to the github checkout
|
186 | $ cd ../myapp
|
187 | $ npm link ../react-admin
|
188 | # go back to the checkout, and replace the version of react by the one in your app
|
189 | $ cd ../react-admin
|
190 | $ npm link ../myapp/node_modules/react
|
191 | $ make watch
|
192 | # in another terminal, go back to your app, and start it as usual
|
193 | $ cd ../myapp
|
194 | $ npm run
|
195 | ```
|
196 |
|
197 | **Tip**: If you're on Windows and can't use `make`, try [this Gist](https://gist.github.com/mantis/bb5d9f7d492f86e94341816321500934).
|
198 |
|
199 | ## License
|
200 |
|
201 | React-admin is licensed under the [MIT License](https://github.com/marmelab/react-admin/blob/master/LICENSE.md), sponsored and supported by [marmelab](http://marmelab.com).
|
202 |
|
203 | ## Donate
|
204 |
|
205 | This library is free to use, even for commercial purpose. If you want to give back, please talk about it, [help newcomers](https://stackoverflow.com/questions/tagged/react-admin), or contribute code. But the best way to give back is to **donate to a charity**. We recommend [Doctors Without Borders](http://www.doctorswithoutborders.org/).
|