react-card-profile

react-card-profile

ProfileCard is a React component designed for creating interactive and customizable profile cards. Use this component to showcase information about an individual, including their name, description, social media links, and more.

Key Features

• Customization: Highly customizable with options to adjust width, background color, title color, text color, and background image of the card.

• Integrated Social Icons: Includes predefined social media icons for platforms such as Facebook, Github, Instagram, Twitter, TikTok, LinkedIn, and Youtube.

• Automatic Social Media Detection: Automatically selects the correct icon for the provided social media links, making it easy to integrate new platforms.

Installation

npm install react-card-profile

Basic Usage

import React from 'react';
import { ProfileCard } from 'react-card-profile';

const MyProfile = () => {
  const myCardStyle = {
    width: '300px',
    backgroundColor: '#F0F0F0',
    titleColor: '#333333',
    descriptionColor: '#666666',
    backgroundPicture: 'https://example.com/background.jpg',
    pictureUrl: 'https://example.com/profile-picture.jpg',
  };

  const myMedias = ['https://facebook.com/myprofile', 'https://github.com/myprofile'];

  return <ProfileCard name="John Doe" description="Software Developer" mediasUrl={myMedias} cardStyle={myCardStyle} />;
};

export default MyProfile;

Props

Prop	Type	Description
name	string	The name of the individual being displayed.
description	string	(Optional) A brief description or role of the individual.
mediasUrl	string[]	An array of social media URLs associated with the individual.
cardStyle	object	(Optional) An object containing styles for customizing the appearance of the profile card.

cardStyle Object Properties

Property	Type	Description
width	string	(Optional) Width of the profile card. Example: '300px'.
backgroundColor	string	(Optional) Background color of the card. Example: '#F0F0F0'.
titleColor	string	(Optional) Color of the title (name) text. Example: '#333333'.
descriptionColor	string	(Optional) Color of the description text. Example: '#666666'.
backgroundPicture	string	(Optional) URL of the background picture for the card. Example: 'https://example.com/background.jpg'.
pictureUrl	string	URL of the individual's profile picture. Example: 'https://example.com/profile-picture.jpg'.

Customize and showcase your profiles attractively with ProfileCard!