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.
- Install via npm:
npm install react-gfg
- With Yarn:
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;
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 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).
For detailed information, check the here
- Clone the repository and install dependencies:
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.
Your contributions and feedback are what make React-GFG better! Thank you for being a part of this project.