@webiny/app-wcp

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

Table of Contents

• Installation
• Overview
• Examples
• Reference
  • Components
    • WcpLicenseProvider
  • 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 WcpLicenseProvider 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 WcpLicenseProvider 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 WcpLicenseProvider provider React component.

Reference

Components

WcpLicenseProvider

Type Declaration

export declare const Wcp: React.ComponentType;

The WcpLicenseProvider 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 { WcpLicenseProvider } from "@webiny/app-wcp";

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

export const App;

Hooks

useWcp

Type Declaration

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 wcp = useWcp();

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

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