Package Exports

react-admin-loopback2

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-admin-loopback2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Loopback Client for react-admin

For using Loopback 3 with react-admin.

Installation

npm install --save react-admin-loopback

Prerequisite

Your loopback server must response Content-Range header when querying list. Please use loopback-content-range on your server end.

Usage

// in src/App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import loopbackClient, { authProvider } from 'react-admin-loopback';
import { List, Datagrid, TextField, NumberField } from 'react-admin';

import { ShowButton, EditButton, Edit, SimpleForm, DisabledInput, TextInput, NumberInput } from 'react-admin';
import { Create} from 'react-admin';
import { Show, SimpleShowLayout } from 'react-admin';

const BookList = (props) => (
  <List {...props}>
    <Datagrid>
      <ShowButton />
      <EditButton />
      <TextField source="author" />
      <NumberField source="count" />
    </Datagrid>
  </List>
);
export const BookShow = (props) => (
  <Show {...props}>
    <SimpleShowLayout>
      <TextField source="author" />
      <NumberField source="count" />
    </SimpleShowLayout>
  </Show>
);
export const BookEdit = (props) => (
  <Edit {...props}>
    <SimpleForm>
      <DisabledInput source="id" />
      <TextInput source="author" />
      <NumberInput source="count" />
    </SimpleForm>
  </Edit>
);
export const BookCreate = (props) => (
  <Create {...props}>
    <SimpleForm>
      <TextInput source="author" />
      <NumberInput source="count" />
    </SimpleForm>
  </Create>
);
const App = () => (
  <Admin dataProvider={loopbackClient('http://localhost:3000')} authProvider={authProvider('http://localhost:3000/users/login')}>
    <Resource name="books" show={BookShow} create={BookCreate} edit={BookEdit} list={BookList} />
  </Admin>
);

export default App;

The dataProvider supports include:

// dataProvider.js
import loopbackProvider from 'react-admin-loopback';

const dataProvider = loopbackProvider('http://localhost:3000');
export default (type, resource, params) => 
  new Promise(resolve => 
    setTimeout(() => resolve(dataProvider(type, resource, params)), 500)  
  );

import dataProvider from './dataProvider';

...

dataProvider(GET_LIST, 'books', {
  filter: { hide: false },
  sort: { field: 'id', order: 'DESC' },
  pagination: { page: 1, perPage: 0 },
  include: 'users'
}).then(response => {
  ...
});

...

License

This library is licensed under the MIT Licence.