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!