v3.1 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

NameTypeValuerequiredDescription
dataProviderobjectdataProvideryescommunicates with your API
schemaAnalyzerobjectschemaAnalyzeryesretrieves resource type according to Schema.org vocabulary
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
    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
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

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

NameTypeValuerequiredDescription
entrypointstring-yesentrypoint of the API
mercureobject|boolean*noconfiguration to use Mercure
dataProviderobjectdataProvidernohydra 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

NameTypeValuerequiredDescription
dataProviderdataProvider-yesdata provider to use
docEntrypointstring-yesdoc entrypoint of the API
entrypointstring-yesentrypoint of the API
mercureobject|boolean*noconfiguration to use Mercure

* 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

# Open API 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.

# Open API Schema Analyzer

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

# Other Components

# 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-yesname of the property 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-yesname of the property 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