App Plugins Reference

Summary

header-left

header-middle

header-right

menu

route


header-left

Summary

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

Scopes Multi Autocomplete

Type

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

Example

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

header-middle

Summary

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

Scopes Multi Autocomplete

Type

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

Example

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

header-right

Summary

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

Scopes Multi Autocomplete

Type

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

Example

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

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 MenuPlugin = Plugin & {
type: "menu";
render(props: {
Menu: typeof Menu;
Section: typeof Section;
Item: typeof Item;
}): React.ReactNode;
order?: number;
};

Example

{
type: "menu",
name: "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 Michael Agboola