ReactJS Semantic UI flag Element

Last Updated : 09 Sep, 2021

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.

In this article, we will know how to use flag element in ReactJS Semantic UI.

Flag element is used to represent the country flags.

Syntax:

<flag name='countryName'/>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Install semantic UI in your given directory.

 npm install semantic-ui-react semantic-ui-css

Project Structure: It will look like the following.

Example 1: In this example we will use the flag element with the name of the country and code in a table format.

Filename: App.js

Javascript

import React from 'react'
import {Table, Flag} from 'semantic-ui-react'
 
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
 
<br></br>
const Btt = () =>
<Table>
    <Table.Header>
        <Table.Row>
            <Table.HeaderCell>Country</Table.HeaderCell>
            <Table.HeaderCell>Flag</Table.HeaderCell>
            <Table.HeaderCell>Code</Table.HeaderCell>
        </Table.Row>
    </Table.Header>
    <Table.Body>
        <Table.Row>
            <Table.Cell>India</Table.Cell>
            <Table.Cell><Flag name='india'/></Table.Cell>
            <Table.Cell>in</Table.Cell>
        </Table.Row>
    </Table.Body>
</Table>
export default Btt    

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Output:

Example 2: In this example, we will render three country’s flag by using the flag element.

Filename: App.js

Javascript

import React from 'react'
import {Segment, Flag} from 'semantic-ui-react'
 
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
 
<br></br>
const Btt = () =>
<Segment>
    <Flag name='india' />
    <Flag name='america' />
    <Flag name='australia' />
</Segment>
 
export default Btt    