React-Bootstrap Badges API

In React-Bootstrap Badges API provides a Badge component that allows developers to easily integrate badges into the React application. The Badges are mainly used to show the numerical or status information in an attractive visually appealing manner. This Badge component supports various propers for setting up different background colors and dynamically updating content.

Badges API props:

• variant: This prop specifies the color scheme of the badge (e.g., “primary“, “secondary“, “success“, “danger“).
• bg: This is used to set the background color of the badge using Bootstrap contextual color classes (e.g., “primary“, “secondary“, “info“).
• text: This prop defines the text color of the badge using Bootstrap contextual color classes (e.g., “light“, “dark“).
• pill: This is used when set to true, and creates a rounded badge for a softer visual appearance.
• as: This prop allows the use of a different HTML element or custom React component to render the badge.
• className: This is the additional CSS class to be applied to the badge component for further styling.
• style: This is an object for inline styling to customize the appearance of the badge.

Syntax:

<Badge>. . .</Badge>

Steps to Create React Application And Installing Module:

Step 1: Create a React application by running the given command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, change your directory to the created project directory:

cd foldername

Step 3: After creating your application, Install the react-bootstrap module using the following command:

npm install react-bootstrap bootstrap

Project Structure:

Example 1: We are creating a badge component by using the bg prop in the App.js file.

Javascript

import React from "react";
import Badge from "react-bootstrap/Badge";
const App = () => {
    return (
        <div style={{ textAlign: "center", padding: "30px" }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>React-Bootstrap Badges API</h4>
            <p>Unlock your learning journey with our badge-powered platform.</p>
            <div style={{ marginTop: "20px" }}>
                <h4>
                    <Badge
                        bg="success"
                        style={{ fontSize: "1.2em", marginRight: "10px" }}
                    >
                        10
                    </Badge>
                    Notifications
                </h4>
                <p>Stay informed about exciting updates and achievements.</p>
            </div>
            <div style={{ marginTop: "20px" }}>
                <h4>
                    <Badge
                        bg="info"
                        style={{ fontSize: "1.2em", marginRight: "10px" }}
                    >
                        5
                    </Badge>
                    Messages
                </h4>
                <p>Connect with fellow geeks and share your insights.</p>
            </div>
            <div style={{ marginTop: "20px" }}>
                <h4>
                    <Badge
                        bg="warning"
                        style={{ fontSize: "1.2em", marginRight: "10px" }}
                    >
                        3
                    </Badge>
                    Achievements
                </h4>
                <p>
                    Earn badges as you progress through your learning journey.
                </p>
            </div>
        </div>
    );
};
export default App;

Output:

Example 2: We have created user interactive React-Bootstrap Badge by using different propes like variant, text, pill, and style. According to the user interaction, the Badge component is been responding and changing the numerical values dynamically.

Javascript

import React, { useState } from "react";
import Badge from "react-bootstrap/Badge";
import Button from "react-bootstrap/Button";
const App = () => {
    const [notcnt, setNotcnt] = useState(5);
    const [msgCnt, setMsgcnt] = useState(10);
    const [achieveCnt, setAchieveCnt] = useState(3);
    const badgeClickFunction = (type) => {
        if (type === "notifications") {
            setNotcnt(notcnt + 1);
        } else if (type === "messages") {
            setMsgcnt(msgCnt + 1);
        } else if (type === "achievements") {
            setAchieveCnt(achieveCnt + 1);
        }
    };
    const resetFunction = () => {
        setNotcnt(5);
        setMsgcnt(10);
        setAchieveCnt(3);
    };
    return (
        <div style={{ textAlign: "center", padding: "30px" }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h3>React-Bootstrap Badges API</h3>
            <p>Click on the badges to simulate changes!</p>
            <div
                style={{
                    display: "flex",
                    justifyContent: "center",
                    marginTop: "20px",
                }}
            >
                <div style={{ marginRight: "30px" }}>
                    <h4>
                        Notifications{" "}
                        <Badge
                            variant="danger"
                            text="light"
                            pill
                            style={{ fontSize: "1.5em", cursor: "pointer" }}
                            onClick={() => badgeClickFunction("notifications")}
                        >
                            {notcnt}
                        </Badge>
                    </h4>
                    <p>Stay updated with the latest notifications.</p>
                </div>
                <div style={{ marginRight: "30px" }}>
                    <h4>
                        Messages{" "}
                        <Badge
                            variant="info"
                            text="light"
                            pill
                            style={{ fontSize: "1.5em", cursor: "pointer" }}
                            onClick={() => badgeClickFunction("messages")}
                        >
                            {msgCnt}
                        </Badge>
                    </h4>
                    <p>Connect with others through messages.</p>
                </div>
                <div>
                    <h4>
                        Achievements{" "}
                        <Badge
                            variant="warning"
                            text="dark"
                            pill
                            style={{ fontSize: "1.5em", cursor: "pointer" }}
                            onClick={() => badgeClickFunction("achievements")}
                        >
                            {achieveCnt}
                        </Badge>
                    </h4>
                    <p>Earn badges as you progress.</p>
                </div>
            </div>
            <Button
                variant="secondary"
                size="lg"
                onClick={resetFunction}
                style={{ marginTop: "20px" }}
            >
                Reset Counts
            </Button>
        </div>
    );
};
export default App;

Output:

Conclusion:

In conclusion, React-Bootstrap’s Badges API offers a versatile solution for integrating visually appealing badges in React applications. With features like variant, bg, and pill, developers can easily customize badge appearance. The API’s seamless integration with React components enhances user experience without revealing any discernible traces of AI-generated content.