Components Reference

# HydraAdmin

Creates a complete Admin, using <AdminGuesser>, but configured specially for Hydra.

Tip: For OpenAPI documented APIs, use the <OpenApiAdmin> component instead.

Tip: If you want to use other formats (see supported formats: @api-platform/api-doc-parser) use <AdminGuesser> instead.

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

const App = () => (
  <HydraAdmin entrypoint="https://demo.api-platform.com">
    <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

An implementation for the React Admin dataProvider methods: create, delete, getList, getManyReference, getOne and update.

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.

# OpenApiAdmin

Creates a complete Admin, as <AdminGuesser>, but configured specially for OpenAPI.

Tip: If you want to use other formats (see supported formats: @api-platform/api-doc-parser) use <AdminGuesser> instead.

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

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

export default App;

# OpenApiAdmin Props

Name	Type	Value	required	Description
docEntrypoint	string	-	yes	doc entrypoint of the API
entrypoint	string	-	yes	entrypoint of the API
dataProvider	dataProvider	-	no	data provider to use
mercure	object\|boolean	*	no	configuration 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

An implementation for the React Admin dataProvider methods: create, delete, getList, getManyReference, getOne and update.

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.

# AdminGuesser

<AdminGuesser> automatically renders an <Admin> component for resources exposed by a web API documented with any format supported by @api-platform/api-doc-parser.

// App.tsx
import { AdminGuesser } from '@api-platform/admin';
import dataProvider from './dataProvider';
import schemaAnalyzer from './schemaAnalyzer';

const App = () => (
  <AdminGuesser dataProvider={dataProvider} schemaAnalyzer={schemaAnalyzer} />
);

export default App;

Use it if your API is neither documented with Hydra nor OpenAPI, but in a format supported by @api-platform/api-doc-parser.

Tip: For Hydra documented APIs, use the <HydraAdmin> component instead.

Tip: For OpenAPI documented APIs, use the <OpenApiAdmin> component instead.

<AdminGuesser> renders all exposed resources by default, but you can choose what resource you want to render by passing <ResourceGuesser> components as children.

// App.tsx
import { AdminGuesser, ResourceGuesser } from '@api-platform/admin';
import dataProvider from './dataProvider';
import schemaAnalyzer from './schemaAnalyzer';

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

export default App;

Tip: Deprecated resources are hidden by default, but you can add them back using an explicit <ResourceGuesser> component.

# AdminGuesser Props

Name	Type	Value	required	Description
dataProvider	object	dataProvider	yes	the dataProvider to use to communicate with your API
schemaAnalyzer	object	schemaAnalyzer	yes	retrieves resource type according to Schema.org vocabulary
authProvider	object	authProvider	no	the authProvider to use to manage authentication
admin	React component	-	no	React component to use to render the Admin
includeDeprecated	boolean	true or false	no	displays or not deprecated resources

<AdminGuesser> also accepts all props accepted by React Admin’s <Admin> component, such as theme, darkTheme, layout and many others.

# ResourceGuesser

Based on React Admin <Resource> component, <ResourceGuesser> provides the default component to render for each view: <CreateGuesser>, <ListGuesser>, <EditGuesser> and <ShowGuesser>.

You can also pass your own component to use for any view, using the create, list, edit or show props.

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

const App = () => (
  <AdminGuesser dataProvider={dataProvider} schemaAnalyzer={schemaAnalyzer}>
    {/* Uses the default guesser components for each CRUD view */}
    <ResourceGuesser name="books" />
    {/* Overrides only the list view */}
    <ResourceGuesser name="reviews" list={ReviewList} />
  </AdminGuesser>
);

export default App;

# ResourceGuesser Props

Name	Type	Value	required	Description
name	string	-	yes	endpoint of the resource
list	React ComponentType	-	no	the component to render for the list view
create	React ComponentType	-	no	the component to render for the create view
edit	React ComponentType	-	no	the component to render for the edit view
show	React ComponentType	-	no	the component to render for the show view

<ResourceGuesser> also accepts all props accepted by React Admin’s <Resource> component, such as recordRepresentation, icon or options.

# ListGuesser

Based on React Admin <List>, <ListGuesser> displays a list of records in a <Datagrid>.

If no children are passed, it will display fields guessed from the schema.

// BooksList.tsx
import { ListGuesser } from '@api-platform/admin';

export const BooksList = () => (
  /* Will display fields guessed from the schema */
  <ListGuesser />
);

It also accepts a list of fields as children. They can be either <FieldGuesser> elements, or any field component available in React Admin, such as <TextField>, <DateField> or <ReferenceField> for instance.

// BooksList.tsx
import { FieldGuesser, ListGuesser } from '@api-platform/admin';
import { DateField, NumberField } from 'react-admin';

export const BooksList = () => (
  <ListGuesser>
      {/* FieldGuesser comes from API Platform Admin */}
      <FieldGuesser source="isbn" label="ISBN" />
      <FieldGuesser source="title" />
      <FieldGuesser source="author" />

      {/* DateField and NumberField come from React Admin */}
      <DateField source="publicationDate" />
      <NumberField source="reviews.length" label="Reviews" />
  </ListGuesser>
);

# ListGuesser Props

<ListGuesser> accepts all props accepted by both React Admin <List> component and <Datagrid> component.

For instance you can pass props such as filters, sort or pagination.

# CreateGuesser

Displays a creation page for a single item. Uses React Admin <Create> and <SimpleForm> components.

If no children are passed, it will display inputs guessed from the schema.

// BooksCreate.tsx
import { CreateGuesser } from '@api-platform/admin';

export const BooksCreate = () => (
  /* Will display inputs guessed from the schema */
  <CreateGuesser />
);

It also accepts a list of inputs as children, which can be either <InputGuesser> elements, or any input component available in React Admin, such as <TextInput>, <DateInput> or <ReferenceInput> for instance.

// BooksCreate.tsx
import { CreateGuesser, InputGuesser } from '@api-platform/admin';
import { DateInput, TextInput, required } from 'react-admin';

export const BooksCreate = () => (
  <CreateGuesser>
    {/* InputGuesser comes from API Platform Admin */}
    <InputGuesser source="isbn" label="ISBN" />
    <InputGuesser source="title" />
    <InputGuesser source="author" />

    {/* DateInput and TextInput come from React Admin */}
    <DateInput source="publicationDate" />
    <TextInput
      source="description"
      multiline
      validate={required()}
    />
  </CreateGuesser>
);

# CreateGuesser Props

<CreateGuesser> accepts all props accepted by both React Admin <Create> component and <SimpleForm> component.

For instance you can pass props such as redirect, defaultValues or warnWhenUnsavedChanges.

# EditGuesser

Displays an edition page for a single item. Uses React Admin <Edit> and <SimpleForm> components.

If no children are passed, it will display inputs guessed from the schema.

// BooksEdit.tsx
import { EditGuesser } from '@api-platform/admin';

export const BooksEdit = () => (
  /* Will display inputs guessed from the schema */
  <EditGuesser />
);

// BooksEdit.tsx
import { EditGuesser, InputGuesser } from '@api-platform/admin';
import { DateInput, TextInput, required } from 'react-admin';

export const BooksEdit = () => (
  <EditGuesser>
    {/* InputGuesser comes from API Platform Admin */}
    <InputGuesser source="isbn" label="ISBN" />
    <InputGuesser source="title" />
    <InputGuesser source="author" />

    {/* DateInput and TextInput come from React Admin */}
    <DateInput source="publicationDate" />
    <TextInput
      source="description"
      multiline
      validate={required()}
    />
  </EditGuesser>
);

# EditGuesser Props

<EditGuesser> accepts all props accepted by both React Admin <Edit> component and <SimpleForm> component.

For instance you can pass props such as redirect, mutationMode, defaultValues or warnWhenUnsavedChanges.

# ShowGuesser

Displays a detailed page for one item. Based on React Admin <Show> ans <SimpleShowLayout> components.

If you pass no children, it will display fields guessed from the schema.

// BooksShow.tsx
import { ShowGuesser } from '@api-platform/admin';

export const BooksShow = () => (
  /* Will display fields guessed from the schema */
  <ShowGuesser />
);

It also accepts a list of fields as children, which can be either <FieldGuesser> elements, or any field component available in React Admin, such as <TextField>, <DateField> or <ReferenceField> for instance.

// BooksShow.tsx
import { FieldGuesser, ShowGuesser } from '@api-platform/admin';
import { DateField, NumberField } from 'react-admin';

export const BooksShow = () => (
  <ShowGuesser>
    {/* FieldGuesser comes from API Platform Admin */}
    <FieldGuesser source="isbn" label="ISBN" />
    <FieldGuesser source="title" />
    <FieldGuesser source="author" />

    {/* DateField and NumberField come from React Admin */}
    <DateField source="publicationDate" />
    <NumberField source="reviews.length" label="Reviews" />
  </ShowGuesser>
);

# ShowGuesser Props

<ShowGuesser> accepts all props accepted by both React Admin <Show> component and <SimpleShowLayout> component.

# FieldGuesser

Renders a field according to its type, using the schema analyzer.

Based on React Admin field components, such as <TextField>, <DateField> or <ReferenceField>.

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

export const BooksShow = () => (
  <ShowGuesser>
    {/* Renders a TextField */}
    <FieldGuesser source="title" />
    {/* Renders a NumberField */}
    <FieldGuesser source="rating" />
    {/* Renders a DateField */}
    <FieldGuesser source="publicationDate" />
  </ShowGuesser>
);

# FieldGuesser Props

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

<FieldGuesser> also accepts any common field prop supported by React Admin, such as label for instance.

# InputGuesser

Renders an input according to its type, using the schema analyzer.

Uses React Admin input components, such as <TextInput>, <DateInput> or <ReferenceInput>.

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

export const BooksCreate = () => (
  <CreateGuesser>
    {/* Renders a TextInput */}
    <InputGuesser source="title" />
    {/* Renders a NumberInput */}
    <InputGuesser source="rating" />
    {/* Renders a DateInput */}
    <InputGuesser source="publicationDate" />
  </CreateGuesser>
);

# InputGuesser Props

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

<InputGuesser> also accepts any common input prop supported by React Admin, such as defaultValue, readOnly, helperText or label.

You can also pass props that are specific to a certain input component. For example, if you know an <InputGuesser> will render a <TextInput> and you would like that input to be multiline, you can set the multiline prop.

<InputGuesser source="description" multiline />