React-GFG

Collection of components for showcasing your Geek for Geeks profile in your portfolio ✨. Built with React and CSS

Read Full Blog

bamacharan.hashnode.dev/introducing-react-gfg

Features

• 📈 Clean and simple GFG stats, as reusable components
• 🎨 Customizable themes and styles
• 🎉 Fully customizable using CSS
• 🍀 Open source - MIT License

Installation

With npm:

npm install react-gfg

With Yarn:

yarn add react-gfg

Usage

Each Component has their own default properties. You can overwrite the defaults by passing props into the loaders.

Example

import { GFGProfile } from "react-gfg";

function App() {
  return (
    <div className="w-full flex justify-center items-center">
      <GFGProfile username="bamacharan" />
    </div>
  );
}

export default App;

Profile Picture Change with img prop

import { GFGProfile } from "react-gfg";

function App() {
  return (
    <div className="w-full flex justify-center items-center">
      <GFGProfile username="bamacharan" img={"imageURL.png"}/>
    </div>
  );
}

export default App;

Remove Profile Picture with showImg prop

import { GFGProfile } from "react-gfg";

function App() {
  return (
    <div className="w-full flex justify-center items-center">
      <GFGProfile username="bamacharan" ShowImg={"none"}/>
    </div>
  );
}

export default App;

CSS Structure

The GFGProfile component uses the following CSS classes and styles:

Base Styles

• .card: Styles for the main container of the profile card.
• .profile-container: Styles for the container that holds the profile image and information.
• .image-container: Styles for the container that holds the profile image.
• .profile-image: Styles for the profile image itself.
• .info-container: Styles for the container that holds the user's information.
• .username: Styles for the username text.
• .institution: Styles for the institution text.
• .info-row: Styles for the row that contains the institute rank, current streak, and max streak.
• .info: Styles for the labels in the information sections.
• .value: Styles for the values in the information sections.
• .info-main: Styles for the main information section that contains languages used, coding score, and total problems solved.
• .error: Styles for the error message when the username is not provided.

Customizable Styles

Colors

• body: Change the font family for the entire component.
• .card: Change the background color and gradient of the main card container.
• .username: Change the color and font weight of the username.
• .username a:hover: Change the color of the username link on hover.
• .institution: Change the color and font size of the institution text.
• .info-row: Change the color and border styles of the information row.
• .info: Change the font weight of the information labels.
• .value: Change the color and font weight of the information values.

Dimensions

• .card: Change the maximum width and border radius of the main card container.
• .image-container: Change the width and height of the profile image container.
• .profile-image: Change the object-fit property of the profile image.
• .profile-image:hover: Change the scale transformation of the profile image on hover.
• .info-container: Change the padding of the information container.

Animations

• .profile-image: Add or modify the transition animation for the profile image on hover.

Additional Customizations

You can also add or modify other styles as needed, such as font styles, spacing, and layout adjustments, by targeting the appropriate CSS classes or creating new ones. For more information here

Development

• clone the repo

git clone https://github.com/BamaCharanChhandogi/react-gfg.git

• Install the packages

npm install
#or
yarn install

• To run example website

cd example

npm run dev
#or
yarn dev

• Run the test

npm run test
#or
yarn test

Contributing

If you would like to contribute to this project, please follow these steps:

• Fork the repo
• Clone the repo git clone https://github.com/BamacharanChhandogi/react-gfg.git
• Create your feature branch (git checkout -b feature/YourFeature)
• Commit your changes (git commit -am 'Add some feature')
• Push to the branch (git push origin feature/YourFeature)
• Create a new Pull Request

License

react-gfg is released under the MIT license.

Thank You