custom renderer for logout

Author: aaronpowell

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

@@ -1,17 +1,32 @@
 import React from "react";
 import { StaticWebAppsClassName } from "./constants";
 
-const Logout = ({ postLogoutRedirect }: { postLogoutRedirect?: string }) => (
-  <a
-    href={`/.auth/logout${
-      postLogoutRedirect
-        ? `?post_logout_redirect_uri=${postLogoutRedirect}`
-        : ""
-    }`}
-    className={`logout ${StaticWebAppsClassName}`}
-  >
-    Logout
-  </a>
-);
+export type RenderLogoutProps = {
+  href: string;
+  className: string;
+};
+
+const Logout = ({
+  postLogoutRedirect,
+  customRenderer,
+}: {
+  postLogoutRedirect?: string;
+  customRenderer?: (props: RenderLogoutProps) => JSX.Element;
+}) => {
+  const href = `/.auth/logout${
+    postLogoutRedirect ? `?post_logout_redirect_uri=${postLogoutRedirect}` : ""
+  }`;
+  const className = `logout ${StaticWebAppsClassName}`;
+
+  if (customRenderer) {
+    return customRenderer({ href, className });
+  }
+
+  return (
+    <a href={href} className={className}>
+      Logout
+    </a>
+  );
+};
 
 export { Logout };