How to use Semantic Components like Button Input and Message In C Program

Using Image and Reveal Component to upload image and display it

In this example we have used a button component and a input component to take the input from the user and then used a message component to display the text

Example 1: Below is the implementation of the above approach.

Javascript

import React, { useState } from "react";
 
export const ButtonExample = () => {
    const [answer, setAnswer] = 
        useState("");
    const [showMessage, setShowMessage] = 
        useState(false);
 
    return (
        <div
            style={{
                display: "flex",
                justifyContent: "center",
                flexDirection: "column",
                alignItems: "center",
                margin: "auto",
                padding: "auto",
            }}
        >
            <h2>
                Welcome to GFG Meteor 
                Semantic example
            </h2>
            <div className="ui input focus">
                <input
                    type="text"
                    placeholder="Say Something ..."
                    onChange={(e) => setAnswer(e.target.value)} />
            </div>
            <div
                className="ui animated fade button "
                onClick={() => setShowMessage(true)}
                style={{
                    padding: "10px",
                }}>
                <div className="visible content">
                    Sent to GFG
                </div>
                <div className="hidden content">
                    <i className="arrow right icon" />
                </div>
            </div>
            {showMessage ? (
                <div class="ui message" style={{ color: "grey" }}>
                    <div class="header" style={{ color: "green" }}>
                        GFG says
                    </div>
                    <p>{answer}</p>
                </div>
            ) : (
                <></>
            )}
        </div>
    );
};

To run the project type the following in the terminal:

meteor run

Output:

Output 1

Semantic UI Integrations for Meteor

Semantic UI integration for Meteor is a technique to use the Semantic frontend framework with Meteor. This enables us to use the prebuild component and styles of the Semantic UI in your Meteor projects. With this, you can take advantage of this frontend library to make amazing and responsive websites. Meteor is a full-stack technology that works with React, and Vue and comes with a prebuilt connection to the MongoDB database.