ReactJS Semantic UI header element

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 the header element in ReactJS Semantic UI. The header element is used to make a header.

Properties:

• Page Headers: It is used to set the hierarchy of the section of the page.
• Content Headers: It is used to specify the importance of a particular section.
• Icon Headers: It is used to give emphasis on a particular icon.
• Subheaders: It is used for smaller content.

States:

• Disabled: This state is used disable the header.

Syntax:

<header size='size'>Header</Header>

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 be going to use basic header element by using ReactJS Semantic UI header element.

App.js

import React from 'react'
import {Header} 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 = () =>
<div>
    <Header as='h1'>GeeksforGeeks</Header>
    <Header as='h2'>GeeksforGeeks</Header>
    <Header as='h3'>GeeksforGeeks</Header>
    <Header as='h4'>GeeksforGeeks</Header>
    <Header as='h5'>GeeksforGeeks</Header>
    <Header as='h6'>GeeksforGeeks</Header>
  </div>

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 are going to use the header element with the size attribute and disabled state by using ReactJS Semantic UI header element.

App.js

import React from 'react'
import {Header} 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 = () =>
<div>
    <Header size='huge'>GeeksforGeeks</Header>
    <Header size='large'>GeeksforGeeks</Header>
    <Header size='medium'>GeeksforGeeks</Header>
    <Header size='small'>GeeksforGeeks</Header>
    <Header size='tiny'>GeeksforGeeks</Header>
  </div>

export default Btt

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

npm start

Output:

Reference: https://react.semantic-ui.com/elements/header