Collection of components for showcasing your Geek for Geeks profile in your portfolio ✨. Built with React and CSS
bamacharan.hashnode.dev/introducing-react-gfg
- 📈 Clean and simple GFG stats, as reusable components
- 🎨 Customizable themes and styles
- 🎉 Fully customizable using CSS
- 🍀 Open source - MIT License
With npm:
npm install react-gfg
With Yarn:
yarn add react-gfg
Each Component has their own default properties. You can overwrite the defaults by passing props into the loaders.
import { GFGProfile } from "react-gfg";
function App() {
return (
<div className="w-full flex justify-center items-center">
<GFGProfile username="bamacharan" />
</div>
);
}
export default App;
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;
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;
The GFGProfile
component uses the following CSS classes and 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.
-
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.
-
.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.
-
.profile-image
: Add or modify the transition animation for the profile image on hover.
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
- 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
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
react-gfg
is released under the MIT license.