App Plugins Reference

admin-header-left

Summary

Enables adding custom header elements to the left side of the top bar.

Scopes Multi Autocomplete

Type

type AdminHeaderLeftPlugin = Plugin & {
type: "admin-header-left";
render(params: RenderParams): React.ReactNode;
};

Example

{
type: "admin-header-left",
name: "admin-header-logo",
render() {
return <Logo />;
}
};

admin-header-middle

Summary

Enables adding custom header elements to the middle of the top bar.

Scopes Multi Autocomplete

Type

type AdminHeaderMiddlePlugin = Plugin & {
type: "admin-header-middle";
render(params: RenderParams): React.ReactNode;
};

Example

{
type: "admin-header-middle",
name: "admin-global-search",
render() {
return <SearchBar />;
}
};

admin-header-right

Summary

Enables adding custom header elements to the right side of the top bar.

Scopes Multi Autocomplete

Type

type AdminHeaderRightPlugin = Plugin & {
type: "admin-header-right";
render(params: RenderParams): React.ReactNode;
};

Example

{
type: "admin-header-right",
name: "header-user-menu",
render() {
return <UserMenu />;
}
};

admin-menu

Summary

Enables adding custom menu sections and items in the main menu, located on the left side of the screen.

Scopes Multi Autocomplete

Type

type AdminMenuPlugin = Plugin & {
type: "admin-menu";
render(props: {
Menu: typeof Menu;
Section: typeof Section;
Item: typeof Item;
}): React.ReactNode;
order?: number;
};

Example

{
type: "admin-menu",
name: "admin-menu-shop",
render({ Menu, Section, Item }) {
return (
<Menu name="shop" label={"Shop"}>
<Section label={"Products"}>
<Item label={"Products"} path="/shop/products" />
<Item label={"Manage stock"} path="/shop/stock" />
</Section>
<Section label={"Customers"}>
<Item label={"Customers"} path="/shop/customers" />
<Item label={"Discounts"} path="/shop/discounts" />
</Section>
</Menu>
);
}
}

route

Summary

Enables registering new routes on which you can render your own views.

Type

type RoutePlugin = Plugin & {
type: "route";
route: React.ReactElement;
};

Example

// Import the Route component from the "@webiny/react-router" package.
import { Route } from "@webiny/react-router";
(...)
{
type: "route",
name: "route-shop",
route: (
<Route
exact
path="/shop/products/:id"
render={({ location }) => <h1>My new "/shop/products" route.</h1>}
/>
)
}

You can check the @webiny/react-router for more information on the Route component.

Last updated on by Pavel Denisjuk