Skip to main content
Version: 2.1.4

AppShield

3p-core v2.1.4

3p-core / AppShield

Class: AppShield

<AppShield> — the easiest way to wire SPFx, PnPjs and your own helpers into a React tree.

The component builds an IAppContext object that bundles:

the SPFx WebPartContext a ready‑to‑use PnP SPFI client user & group information a few quality‑of‑life helpers (try, log, report …)

Once initialised the context is exposed through React’s Context API:

const appContext: IAppContext = useAppContext();
ctx.sp.web.getList("/site/SiteAssets").items();

Under the hood <AppShield> also acts as:

an error boundary – (componentDidCatch) renders a friendly fallback UI when a descendant throws a loading gate – shows a modal spinner (or your own component) while the asynchronous initialisation runs

[!TIP] Because <AppShield> owns the global context you should place it as high as possible – ideally directly inside the web‑part’s root component.

Examples​

<AppShield webPartContext={ctx} sp={sp}>
  <Root />
</AppShield>
<AppShield
  webPartContext={ctx}
  sp={sp}
  customContext={{ theme: "dark" }}
  customLoadingComponent={<MySkeletonScreen />}
>
  <Root />
</AppShield>

Extends​