v2.6 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

NameTypeValuerequiredDescription
dataProviderobject or function-yescommunicates with your API
schemaAnalyzerobjectschemaAnalyzeryesretrieves resource type according to Schema.org vocabulary
childrennode or function-no-
themeobjectthemenotheme of your Admin App
includeDeprecatedbooleantrue or falsenodisplays 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
    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

NameTypeValuerequiredDescription
namestring-yesendpoint 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

NameTypeValuerequiredDescription
childrennode or function-no-
resourcestring-yesendpoint of the resource
filterselement-nofilters 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

NameTypeValuerequiredDescription
childrennode or function-no-
resourcestring-yesendpoint of the resource

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

NameTypeValuerequiredDescription
childrennode or function-no-
resourcestring-yesendpoint of the resource

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

NameTypeValuerequiredDescription
childrennode or function-no-
resourcestring-yesendpoint of the resource

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

NameTypeValuerequiredDescription
entrypointstring-yesentrypoint of the API
mercurebooleanobject*yes

* 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

NameTypeValuerequiredDescription
sourcestring-yesendpoint of the resource

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

NameTypeValuerequiredDescription
sourcestring-yesendpoint of the resource

You can also help us improve the documentation of this page.

Made with love by

Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.

Learn more

Copyright © 2023 Kévin Dunglas

Sponsored by Les-Tilleuls.coop