Reactn-crud NPM

reactn-crud

A frontend library for building CRUD pages running on top of REST/GraphQL APIs, using Es6, React, reactn and react-router.

Heavly inspired in react-admin Demo using antd design

ReactN CRUD

Install

npm install --save reactn-crud

Usage

Wrap your app with reactn.Provider and set your dataProvider to make compatible with your REST service.

import React from 'react';
import dataProvider from './dataProvider';
import { settings, Provider } from 'reactn-crud';

// set data provider
settings.set('dataProvider', dataProvider);

ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  document.getElementById('root')
);

Create a CRUD page

// in users/index.js
import React from 'react';
import { crud } from 'reactn-crud';
import { ListController, ShowController,FormController } from 'reactn-crud-ui-antd';

function UserList(props) {
  const columns = [
    { title: 'Email', dataIndex: 'email', primary: true },
    { title: 'First Name', dataIndex: 'first_name', sorter: true },
    { title: 'Last Name', dataIndex: 'last_name', sorter: true },
  ];
  return (
    <ListController {...props} resource="users" columns={columns} />
  );
}

function UserShow(props) {
  const fields = [
    { dataIndex: 'email', title: 'Email' },
    {
      dataIndex: 'name',
      title: 'Full name',
      render: record => `${record.first_name} ${record.last_name}`,
    },
  ];
  return <ShowController {...props} fields={fields} resource="users" />;
}

function UserForm(props) {
  return (
    <FormController {...props} resource="users">
      <Input source="email" label="Email" type="email" required />
      <Input source="first_name" label="First Name" required />
      <Input source="last_name" label="Last Name" required />
    </FormController>
  );
}

const config = {
  components: {
    List: UserList,
    Create: UserForm,
    Edit: UserForm,
    Show: UserShow,
  },
};
const { routes } = crud('users', config);
export default routes;

Importing routes

// in App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import usersRoutes from './users';

function App() {
  return (
    <Router>
      <Layout>
        <Switch>
          {usersRoutes.map(route => (
            <Route key={route.id} {...route} />
          ))}
          <Route component={() => 'No Match'} />
        </Switch>
      </Layout>
    </Router>
  );
}