Profile Picture (React)

Description

React Profile Picture is a simple and easy to use React component to display profile picture.

Demo: CodeSandbox

Installation

Install react-profile-picture

npm install @nightmaregaurav/react-profile-picture

Usage

import React, {CSSProperties} from 'react';
import ProfilePicture from "@nightmaregaurav/react-profile-picture";

interface ProfilePhotoProps {
  size: Exclude<CSSProperties["width"], undefined>;
  imageUrl: string;
  showOnlineBadge: boolean;
  isOnline?: boolean;
  onlineBadgeColor?: Exclude<CSSProperties["color"], undefined>;
}

const ProfilePhoto = (
  {
    size,
    imageUrl,
    showOnlineBadge,
    isOnline = false,
    onlineBadgeColor = "#44b700",
  }: ProfilePhotoProps,
) => {
  return (
    <ProfilePicture
      size={size}
      imageUrl={imageUrl}
      showOnlineBadge={showOnlineBadge}
      isOnline={isOnline}
      onlineBadgeColor={onlineBadgeColor}
    />
  );
};

export default ProfilePhoto;

Technical Details

• Language: Typescript

How to Contribute

• Fork the repository
• Clone the forked repository
• Make changes
• Commit and push the changes
• Create a pull request
• Wait for the pull request to be merged
• Celebrate
• Repeat

If you are new to open source, you can read this to learn how to contribute to open source projects. If you are new to GitHub, you can read this to learn how to use GitHub. If you are new to Git, you can read this to learn how to use Git. If you are new to TypeScript, you can read this to learn how to use TypeScript.

License

React Profile Picture is released under the MIT License. You can find the full license details in the LICENSE file.

Made with ❤️ by NightmareGaurav.

Open For Contribution