react-card-profile
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

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!

Package Sidebar

Install

npm i react-card-profile

Weekly Downloads

1

Version

0.1.2

License

MIT

Unpacked Size

437 kB

Total Files

14

Last publish

Collaborators

  • jaycom17