Components

Resource Components

AdminGuesser

<AdminGuesser> renders automatically an Admin component for resources exposed by a web API documented with any format supported by @api-platform/api-doc-parser (for Hydra documented APIs, use the HydraAdmin component instead). It also creates a schema analyzer context, where the schemaAnalyzer service (for getting information about the provided API documentation) is stored.

<AdminGuesser> renders all exposed resources by default, but you can choose what resource you want to render by passing ResourceGuesser components as children. Deprecated resources are hidden by default, but you can add them back using an explicit <ResourceGuesser> component.

// App.js
import { AdminGuesser, ResourceGuesser } from "@api-platform/admin";

const App = () => (
  <AdminGuesser
    entrypoint={entrypoint}
    dataProvider={dataProvider}
    authProvider={authProvider}>
    <ResourceGuesser
      name="books"
      list={BooksList}
      show={BooksShow}
      edit={BooksEdit}
      create={BooksCreate} />
    <ResourceGuesser name="authors" />
  </AdminGuesser>
)

export default App;

Props

ResourceGuesser

Based on React Admin Resource component, <ResourceGuesser> provides default props CreateGuesser, ListGuesser, EditGuesser and ShowGuesser.

Otherwise, you can pass it your own CRUD components using create, list, edit, show props.

// App.js
import { AdminGuesser, ResourceGuesser } from "@api-platform/admin";

const App = () => (
  <AdminGuesser
    entrypoint={entrypoint}
    dataProvider={dataProvider}
    schemaAnalyzer={schemaAnalyzer}
  >
    <ResourceGuesser
      name="books"
      list={BooksList}
      show={BooksShow}
      create={BooksCreate}
      edit={BooksEdit} />
    <ResourceGuesser name="reviews" />
  </AdminGuesser>
);

export default App;

ResourceGuesser Props

You can also use props accepted by React Admin Resource component. For example, the props list, show, create or edit.

Page Components

ListGuesser

Based on React Admin List, <ListGuesser> displays a list of resources in a Datagrid, according to children passed to it (usually FieldGuesser or any field component available in React Admin).

Use hasShow and hasEdit props if you want to display show and edit buttons (both set to true by default).

By default, <ListGuesser> comes with Pagination.

// BooksList.js
import { FieldGuesser, ListGuesser } from "@api-platform/admin";
import { ReferenceField, TextField } from "react-admin";

export const BooksList = props => (
  <ListGuesser {...props}>
    <FieldGuesser source="author" />
    <FieldGuesser source="title" />
    <FieldGuesser source="rating" />
    <FieldGuesser source="description" />
    <FieldGuesser source="publicationDate" />
  </ListGuesser>
);

ListGuesser Props

You can also use props accepted by React Admin List.

CreateGuesser

Displays a creation page for a single item. Uses React Admin Create and SimpleForm components. For simple inputs, you can pass as children API Platform Admin InputGuesser, or any React Admin Input components for more complex inputs.

// BooksCreate.js
import { CreateGuesser, InputGuesser } from "@api-platform/admin";

export const BooksCreate = props => (
  <CreateGuesser {...props}>
    <InputGuesser source="author" />
    <InputGuesser source="title" />
    <InputGuesser source="rating" />
    <InputGuesser source="description" />
    <InputGuesser source="publicationDate" />
  </CreateGuesser>
);

CreateGuesser Props

You can also use props accepted by React Admin Create.

EditGuesser

Displays an edition page for a single item. Uses React Admin Edit and SimpleForm components. For simple inputs, you can use API Platform Admin InputGuesser, or any React Admin Input components for more complex inputs.

// BooksEdit.js
import { EditGuesser, InputGuesser } from "@api-platform/admin";

export const BooksEdit = props => (
  <EditGuesser {...props}>
    <InputGuesser source="author" />
    <InputGuesser source="title" />
    <InputGuesser source="rating" />
    <InputGuesser source="description" />
    <InputGuesser source="publicationDate" />
  </EditGuesser>
);

EditGuesser Props

You can also use props accepted by React Admin Edit.

ShowGuesser

Displays a detailed page for one item. Based on React Admin Show component. You can pass FieldGuesser as children for simple fields, or use any of React Admin basic fields for more complex fields.

// BooksShow.js
import { FieldGuesser, ShowGuesser } from "@api-platform/admin";

export const BooksShow = props => (
  <ShowGuesser {...props}>
    <FieldGuesser source="author" />
    <FieldGuesser source="title" />
    <FieldGuesser source="rating" />
    <FieldGuesser source="description" />
    <FieldGuesser source="publicationDate" />
  </ShowGuesser>
);

ShowGuesser Props

You can also use props accepted by React Admin Show component.

Hydra

HydraAdmin

Creates a complete Admin, as AdminGuesser, but configured specially for Hydra. If you want to use other formats (see supported formats: @api-platform/api-doc-parser) use AdminGuesser instead.

// App.js
import { HydraAdmin, ResourceGuesser } from "@api-platform/admin";

const App = () => (
  <HydraAdmin
    entrypoint={entrypoint}
    dataProvider={dataProvider}
    authProvider={authProvider}
   >
     <ResourceGuesser name="books" />
     { /* ... */ }
  </HydraAdmin>
);

export default App;

HydraAdmin Props

* false to explicitly disable, true to enable with default parameters or an object with the following properties:

• hub: the URL to your Mercure hub
• jwt: a subscriber JWT to access your Mercure hub
• topicUrl: the topic URL of your resources

Data Provider

Based on React Admin create, delete, getList, getManyReference, getOne, update methods, the dataProvider is used by API Platform Admin to communicate with the API. In addition, the specific introspect method parses your API documentation. Note that the dataProvider can be overridden to fit your API needs.

Schema Analyzer

Analyses your resources and retrieves their types according to the Schema.org vocabulary.

Other Components

Pagination

Set by default in the ListGuesser component, the Pagination component uses React Admin Pagination component. By default, it renders 30 items per page and displays a navigation UI. If you want to change the number of items per page or disable the pagination, see the Pagination documentation. It is also capable to handle partial pagination.

FieldGuesser

Renders fields according to their types, using the schema analyzer. Based on React Admin field components.

// BooksShow.js
import { FieldGuesser, ShowGuesser } from "@api-platform/admin";

export const BooksShow = props => (
  <ShowGuesser {...props}>
    <FieldGuesser source="author" />
    <FieldGuesser source="title" />
    <FieldGuesser source="rating" />
    <FieldGuesser source="description" />
    <FieldGuesser source="publicationDate" />
  </ShowGuesser>
)

FieldGuesser Props

You can also use props accepted by React Admin basic fields.

InputGuesser

Uses React Admin input components to generate inputs according to your API documentation (e.g. number HTML input for numbers, checkbox for booleans, selectbox for relationships…).

InputGuesser Props