@precooked/react-profile-button NPM

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

@precooked/react-auth-context @precooked/react-button @precooked/react-popover react react-dom

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago