react-admin-loopback

    1.0.6 • Public • Published

    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.

    Install

    npm i react-admin-loopback

    DownloadsWeekly Downloads

    138

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    30.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • darthwesker