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, for OpenAPI documented APIs, use the OpenApiAdmin 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
    dataProvider={dataProvider}
    authProvider={authProvider}>
    <ResourceGuesser
      name="books"
      list={BooksList}
      show={BooksShow}
      edit={BooksEdit}
      create={BooksCreate} />
    <ResourceGuesser name="authors" />
  </AdminGuesser>
)

export default App;

# Props

Name	Type	Value	required	Description
dataProvider	object	dataProvider	yes	communicates with your API
schemaAnalyzer	object	schemaAnalyzer	yes	retrieves resource type according to Schema.org vocabulary
theme	object	theme	no	theme of your Admin App
includeDeprecated	boolean	true or false	no	displays or not deprecated resources

# 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
    dataProvider={dataProvider}
    schemaAnalyzer={schemaAnalyzer}
  >
    <ResourceGuesser
      name="books"
      list={BooksList}
      show={BooksShow}
      create={BooksCreate}
      edit={BooksEdit} />
    <ResourceGuesser name="reviews" />
  </AdminGuesser>
);

export default App;

# ResourceGuesser Props

Name	Type	Value	required	Description
name	string	-	yes	endpoint of the resource

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

Name	Type	Value	required	Description
filters	element	-	no	filters that can be applied to the list

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

Name	Type	Value	required	Description
entrypoint	string	-	yes	entrypoint of the API
mercure	object\|boolean	*	no	configuration to use Mercure
dataProvider	object	dataProvider	no	hydra data provider to use

* 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

# Hydra 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.

# Hydra Schema Analyzer

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

# OpenAPI

# OpenApiAdmin

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

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

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

export default App;

# OpenApiAdmin Props

Name	Type	Value	required	Description
dataProvider	dataProvider	-	yes	data provider to use
docEntrypoint	string	-	yes	doc entrypoint of the API
entrypoint	string	-	yes	entrypoint of the API
mercure	object\|boolean	*	no	configuration to use Mercure