ProfileButton Component

The ProfileButton component is part of the @precooked library, designed to display user profile information along with login and logout functionality. It also includes a popover for more details and options.

Installation

npm install @precooked/react-profile-button

Props

| Prop | Type | Default | Description | |------------------------|--------------------------|---------------------------------|------------------------------------------------------------------------------------------------------| | style | React.CSSProperties | undefined | Custom styles for the outer wrapper. | | profileThumbnailStyle| React.CSSProperties | undefined | Styles for the profile thumbnail button. | | popoverStyle | any | undefined | Custom styles for the popover content. | | profileImageStyle | React.CSSProperties | undefined | Styles for the profile image displayed inside the popover. | | profileNameStyle | React.CSSProperties | undefined | Styles for the profile name text. | | profileEmailStyle | React.CSSProperties | undefined | Styles for the profile email text. | | authButtonStyle | React.CSSProperties | undefined | Custom styles for the login/logout button inside the popover. | | displayMode | 'popover' or 'expanded' | 'popover' | Controls how the profile is displayed: as a popover or in expanded view. | | nameKey | string | 'name' | Custom key to extract the name from the user object. | | emailKey | string | 'email' | Custom key to extract the email from the user object. | | profilePictureKey | string | 'profile_picture' | Custom key to extract the profile picture from the user object. | | baseUrl | string | '' | Base URL to concatenate with the profile_picture value from the user object. | | defaultProfilePicture| string | '/default-avatar.png' | URL to a default profile picture in case the user is not authenticated or no image is available. | | onLogin | () => void | undefined | Callback function triggered when the login button is clicked. | | onLogout | () => void | undefined | Callback function triggered when the logout button is clicked. |

Example

import React from "react";
import ProfileButton from "@precooked/react-profile-button";

const MyApp: React.FC = () => {
  const handleLogin = () => {
    // Logic for login
  };

  const handleLogout = () => {
    // Logic for logout
  };

  return (
    <ProfileButton
      baseUrl="https://my-server.com"
      defaultProfilePicture="/default-avatar.png"
      onLogin={handleLogin}
      onLogout={handleLogout}
      profileThumbnailStyle={{ borderRadius: "50%" }}
      popoverStyle={{ backgroundColor: "#fff", padding: "10px" }}
      profileNameStyle={{ fontSize: "18px", fontWeight: "bold" }}
      profileEmailStyle={{ fontSize: "14px", color: "#666" }}
      authButtonStyle={{
        backgroundColor: "#007bff",
        color: "#fff",
        padding: "10px 20px",
      }}
    />
  );
};

export default MyApp;

License

MIT