Collection of components for showcasing your Geek for Geeks profile in your portfolio
MIT License
eact-GFG is a comprehensive React component library designed to easily showcase detailed profile information for Geeks for Geeks users. Ideal for embedding in portfolios or web applications.
Profile Stats:
Clean and detailed profile stats presented as reusable components.Customizable:
Tailor themes and styles to match your application's design.Open Source:
Released under the MIT License for flexibility and community contributions.npm install react-gfg
yarn add react-gfg
Hereโs a quick example of how to integrate the GFGProfile component into your application:
import { GFGProfile } from "react-gfg";
function App() {
return (
<div className="w-full flex justify-center items-center">
<GFGProfile username="bamacharan" />
</div>
);
}
export default App;
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;
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;
The GFGProfile
component uses the following customizable CSS classes:
.card
:Main container for the profile card..profile-container
: Contains the profile image and information..profile-image
: The profile image itself..info-container
: Holds the user's profile details.body:
Font family for the entire component..card:
Background color and gradient of the card..username:
Username text color and font weight..info-row:
Styles for the information rows (e.g., institute rank, streaks).git clone https://github.com/BamaCharanChhandogi/react-gfg.git
npm install
#or
yarn install
cd example
npm run dev
#or
yarn dev
npm run test
#or
yarn test
If you would like to contribute to this project, please follow these steps:
git clone https://github.com/BamacharanChhandogi/react-gfg.git
git checkout -b feature/YourFeature
)git commit -am 'Add some feature'
)git push origin feature/YourFeature
)react-gfg
is released under the MIT license.
Your contributions and feedback are what make React-GFG better! Thank you for being a part of this project.