How to use @webiny/plugins - 10 common examples

// @flow
import { hot } from "react-hot-loader";
import React from "react";
import { UiProvider } from "@webiny/app/contexts/Ui";
import { registerPlugins, getPlugins } from "@webiny/plugins";
import { ThemeProvider } from "@webiny/app-admin/contexts/Theme";
import { AppInstaller } from "@webiny/app-admin/components/Install/AppInstaller";
import { PageBuilderProvider } from "@webiny/app-page-builder/contexts/PageBuilder";
import { SecurityProvider } from "@webiny/app-security/contexts/Security";
import { I18NProvider } from "@webiny/app-i18n/contexts/I18N";
import cognito from "@webiny/app-plugin-security-cognito";
import myTheme from "theme";
import "./App.scss";
import plugins from "./plugins";

registerPlugins(
    plugins,
    cognito({
        region: process.env.REACT_APP_USER_POOL_REGION,
        userPoolId: process.env.REACT_APP_USER_POOL_ID,
        userPoolWebClientId: process.env.REACT_APP_USER_POOL_WEB_CLIENT_ID
    })
);

// Execute `init` plugins, they may register more plugins dynamically
getPlugins("webiny-init").forEach(plugin => plugin.init());

const App = () => {
    return (
        
            
                }>

list: Array,
        current: ?GlobalSearch
    }
};

class SearchBar extends React.Component<*, State> {
    state = {
        active: false,
        searchTerm: {
            previous: "",
            current: ""
        },
        plugins: {
            // List of all registered "global-search" plugins.
            list: getPlugins("global-search"),
            hotKeys: getPlugins("global-search-prevent-hotkey"),
            // Current plugin - set by examining current route and its query params (on construct).
            current: undefined
        }
    };

    /**
     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
     */
    downshift: any = React.createRef();

    /**
     * At some point we must programmatically focus the input.
     */
    input: any = React.createRef();

    /**

let { element } = action.payload;
    let parent = getParentElementWithChildren(state, element.id);

    // Remove child from parent
    // $FlowFixMe
    if (!parent) {
        return;
    }

    const index = parent.elements.findIndex(el => el.id === element.id);
    parent = dotProp.delete(parent, "elements." + index);
    store.dispatch(updateElement({ element: parent }));

    // Execute `onChildDeleted` if defined
    const plugin = getPlugin(parent.type);
    if (!plugin) {
        return;
    }

    if (typeof plugin.onChildDeleted === "function") {
        plugin.onChildDeleted({ element: parent, child: element });
    }
});

async function loadPlugins() {
        // If we are on pages list route, import plugins required to render the page content.
        if (location.pathname.startsWith("/page-builder/pages") && !loaded.render) {
            const renderPlugins = await import("@webiny/app-page-builder/render/presets/default");
            registerPlugins(renderPlugins.default);

            globalState.render = true;
            setLoaded({ render: true });
        }

        // If we are on the Editor route, import plugins required to render both editor and preview.
        if (location.pathname.startsWith("/page-builder/editor") && !loaded.editor) {
            const plugins = await Promise.all(
                [
                    import("@webiny/app-page-builder/editor/presets/default"),
                    !loaded.render ? import("@webiny/app-page-builder/render/presets/default") : null
                ].filter(Boolean)
            );
            registerPlugins(plugins.map(p => p.default));

            globalState.editor = true;

// @flow
import { hot } from "react-hot-loader";
import React from "react";
import { registerPlugins, getPlugins } from "@webiny/plugins";
import { PageBuilderProvider } from "@webiny/app-page-builder/contexts/PageBuilder";
import { UiProvider } from "@webiny/app/contexts/Ui";
import plugins from "./plugins";
import myTheme from "theme";
import { GenericNotFoundPage, GenericErrorPage } from "./pageBuilder";
import { I18NProvider } from "@webiny/app-i18n/contexts/I18N";

registerPlugins(plugins);

// Execute `init` plugins, they may register more plugins dynamically
getPlugins("webiny-init").forEach(plugin => plugin.callback());

const defaults = {
    pages: {
        notFound: GenericNotFoundPage,
        error: GenericErrorPage
    }
};

const App = () => {
    return (

// @flow
import { hot } from "react-hot-loader";
import React from "react";
import { registerPlugins, getPlugins } from "@webiny/plugins";
import { PageBuilderProvider } from "@webiny/app-page-builder/context";
import { UiProvider } from "@webiny/app/context/ui";
import plugins from "./plugins";
import myTheme from "theme";
import { GenericNotFoundPage, GenericErrorPage } from "./pageBuilder";
import { I18NProvider } from "@webiny/app-i18n/context";

registerPlugins(plugins);

// Execute `init` plugins, they may register more plugins dynamically
getPlugins("webiny-init").forEach(plugin => plugin.callback());

const defaults = {
    pages: {
        notFound: GenericNotFoundPage,
        error: GenericErrorPage
    }
};

const App = () => {
    return (

const renderPlugins = await import("@webiny/app-page-builder/render/presets/default");
            registerPlugins(renderPlugins.default);

            globalState.render = true;
            setLoaded({ render: true });
        }

        // If we are on the Editor route, import plugins required to render both editor and preview.
        if (location.pathname.startsWith("/page-builder/editor") && !loaded.editor) {
            const plugins = await Promise.all(
                [
                    import("@webiny/app-page-builder/editor/presets/default"),
                    !loaded.render ? import("@webiny/app-page-builder/render/presets/default") : null
                ].filter(Boolean)
            );
            registerPlugins(plugins.map(p => p.default));

            globalState.editor = true;
            globalState.render = true;

            setLoaded({ editor: true, render: true });
        }
    }

// @flow
import { hot } from "react-hot-loader";
import React, { Fragment } from "react";
import { UiProvider } from "@webiny/app/contexts/Ui";
import { registerPlugins, getPlugins } from "@webiny/plugins";
import { ThemeProvider } from "@webiny/app-admin/contexts/Theme";
import { PageBuilderProvider } from "@webiny/app-page-builder/contexts/PageBuilder";
import { SecurityProvider } from "@webiny/app-security/contexts/Security";
import { I18NProvider } from "@webiny/app-i18n/contexts/I18N";
import Login from "@webiny/app-security/admin/views/Login";
import { CircularProgress } from "@webiny/ui/Progress";
import myTheme from "theme";
import "./App.scss";
import plugins from "./plugins";

registerPlugins(plugins);

// Execute `init` plugins, they may register more plugins dynamically
getPlugins("webiny-init").forEach(plugin => plugin.callback());

const App = () => {
    return (
        
            
                
                    {({ initialLoad, authenticated, notAuthenticated }) => (
                        
                            
                                {initialLoad()}
                                {authenticated(
                                    
                                        {getPlugins("route").map((pl: Object) =>

// @flow
import { hot } from "react-hot-loader";
import React from "react";
import { registerPlugins, getPlugins } from "@webiny/plugins";
import { PageBuilderProvider } from "@webiny/app-page-builder/contexts/PageBuilder";
import { UiProvider } from "@webiny/app/contexts/Ui";
import plugins from "./plugins";
import myTheme from "theme";
import { GenericNotFoundPage, GenericErrorPage } from "./pageBuilder";
import { I18NProvider } from "@webiny/app-i18n/contexts/I18N";
import slika from "./slika.png";

registerPlugins(plugins);

// Execute `init` plugins, they may register more plugins dynamically
getPlugins("webiny-init").forEach(plugin => plugin.callback());

const defaults = {
    pages: {
        notFound: GenericNotFoundPage,
        error: GenericErrorPage
    }
};

const App = () => {
    return (

const UsersForm = () => {
    const { form: crudForm } = useCrud();

    const auth = getPlugins("security-authentication-provider")
        .filter(pl => pl.hasOwnProperty("renderUserForm"))
        .pop();

    if (!auth) {
        throw Error(
            `You must register a "security-authentication-provider" plugin to render User form!`
        );
    }

    return (
        <form>
            {({ data, form, Bind }) =&gt; (
                
                    {crudForm.loading &amp;&amp; }
                    
                    </form>