user purge custom render

Author: aaronpowell

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog for `react-static-web-apps-auth`
 
+## [1.7.1] - 2024-03-26
+
+## Added
+
+- Custom render function support for User Purge component
+
 ## [1.7.0] - 2024-03-26
 
 ### Added

react-static-web-apps-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aaronpowell/react-static-web-apps-auth",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "A library to help creating authenticated React apps on Azure Static Web Apps",
   "main": "build/index.js",
   "types": "build/index.d.ts",

react-static-web-apps-auth/src/UserPurge.tsx

@@ -2,29 +2,50 @@ import React from "react";
 import { StaticWebAppsClassName } from "./constants";
 import { AuthProviders } from "./types";
 
+type UserPurgeRenderProps = {
+  label: string;
+  href: string;
+  className: string;
+};
+
 const UserPurge = ({
   globally,
   provider,
-  label
+  label,
+  customRenderer,
 }: {
   globally: boolean;
   provider: AuthProviders;
-  label?: string
+  label?: string;
+  customRenderer?: (props: UserPurgeRenderProps) => JSX.Element;
 }) => {
   const host = globally ? "identity.azurestaticapps.net" : location.hostname;
+  const href = `https://${host}/.auth/purge/${provider}`;
+  const className = `purge ${StaticWebAppsClassName}`;
 
-  return (
-    <a
-      href={`https://${host}/.auth/purge/${provider}`}
-      className={`purge ${StaticWebAppsClassName}`}
-    >
-      {label ?? "Purge user information"}
-    </a>
+  return customRenderer ? (
+    customRenderer({
+      href,
+      className,
+      label: label ?? "Purge user information",
+    })
+  ) : (
+    <DefaultRenderer
+      href={href}
+      className={className}
+      label={label ?? "Purge user information"}
+    />
   );
 };
 
 UserPurge.defaultProps = {
   globally: false,
 };
 
+const DefaultRenderer = (props: UserPurgeRenderProps) => (
+  <a href={props.href} className={props.className}>
+    {props.label}
+  </a>
+);
+
 export { UserPurge };