@rqsts/react-app

A frontend Framework for building admin applications running in the browser on top of REST/GraphQL services, using ES6, React and Material Design. Maintained by Requests Team.

Features

• Adapts to any backend (REST, GraphQL, SOAP, etc.)
• 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)

Installation

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

npm install --save-dev @rqsts/react-app

At a Glance

// in app.js
import React from 'react';
import { render } from 'react-dom';
import { Admin, Resource } from '@rqsts/react-app';
import restProvider from '@rqsts/react-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 @rqsts/react-app:

// in posts.js
import React from 'react';
import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, DisabledInput, TextInput, LongTextInput, DateInput } from '@rqsts/react-app';
export PostIcon from '@material-ui/core/svg-icons/action/book';

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 API?

Yes.

@rqsts/react-app 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.

Batteries Included But Removable

Requests React App 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 @rqsts/react-app with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design.