@webiny/app-wcp

A set of frontend Webiny Control Panel (WCP)-related utilities.

Table of Contents

• Installation
• Overview
• Examples
• Reference
  • Components
    • WcpProvider
  • Hooks
    • useWcp

Installation

npm install --save @webiny/app-wcp

Or if you prefer yarn:

yarn add @webiny/app-wcp

Overview

The @webiny/app-wcp package contains essential Webiny Control Panel (WCP)-related utilities, that can be used within a React app. These include the WcpProvider provider component and the useWcp hook, which can be used to retrieve the current WCP project information and inspect whether a specific feature is available.

ℹ️ INFO

Internally, the WcpProvider provider retrieves WCP project information from the Webiny's default GraphQL API. Because of this, note that this project relies on @webiny/api-wcp when it comes to retrieving project information (via GraphQL).

Examples

| Example | Description | | --------------------------------- | --------------------------------------------------------------- | | Setup | Shows how to set up the WcpProvider provider React component. |

Reference

Components

WcpProvider

export declare const Wcp: React.ComponentType;

The WcpProvider is a provider component, which retrieves the WCP project information. The component also makes it possible to use the useWcp hook, which can be used to get the current WCP project information or inspect whether a specific WCP feature is allowed to be used within the React app.

import React from "react";
import { WcpProvider } from "@webiny/app-wcp";

const App = () => {
  return (
    <WcpProvider>
      <MyApp />
    </WcpProvider>
  );
};

export const App;

Hooks

useWcp

interface UseWcpHook {
  getProject: () => WcpProject | null;
  canUseFeature: (featureId: string) => boolean;
}

export declare function useWcp(): UseWcpHook;

The useWcp hook can be used to get the current WCP project information and inspect whether a specific WCP feature is allowed to be used within the React app.

import React from "react";
import { useWcp } from "@webiny/app-wcp";

export const MyComponent = () => {
  const { canUseFeature } = useWcp();

  if (canUseFeature("advancedPublishingWorkflow")) {
    return <span>We can use Advanced Publishing Workflow (APW).</span>;
  }

  return <span>We cannot use Advanced Publishing Workflow (APW).</span>;
};