ReactJS Semantic UI Tab Module

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 Tab Module in ReactJS Semantic UI, Tab Module is used with a menu whose content can be shown on a particular tab click.

Properties:

• Pointing Menu: A menu can be made to point its tab panes.
• Secondary Menu: A secondary menu by adjusting to its content.
• Text Menu: We can format tab menu for the text content.

States:

• loading: This state is used for loading a tab

Syntax:

const tab= [
  {
    menuItem: 'Title', render: () => <Tab.Pane>Content</Tab.Pane>,
  };
]

const tab1 = () => <Tab panes={tab} />

export default tab1

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.

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

npm start

Example 1: This is the basic example which shows how to use tab module by using ReactJS Semantic UI Tab Module.

App.js

import React from "react";
import { Tab } 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 />;

const gfg = [
  { menuItem: "GeeksforGeeks", render: () => <Tab.Pane>Content 1</Tab.Pane> },
  { menuItem: "GeeksforGeeks 2", render: () => <Tab.Pane>Content 2</Tab.Pane> },
  { menuItem: "GeeksforGeeks 3", render: () => <Tab.Pane>Content 3</Tab.Pane> },
];

const btt = () => <Tab panes={gfg} />;

export default btt;

Output: 

Example 2: In this example, we are showing the loading state in a tab module by using ReactJS Semantic UI Tab Module.

App.js

import React from "react";
import { Tab } 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 />;

const gfg = [
  {
    menuItem: "GeeksforGeeks",
    render: () => <Tab.Pane loading>Content 1</Tab.Pane>,
  },
  {
    menuItem: "GeeksforGeeks 2",
    render: () => <Tab.Pane loading>Content 2</Tab.Pane>,
  },
  {
    menuItem: "GeeksforGeeks 3",
    render: () => <Tab.Pane loading>Content 3</Tab.Pane>,
  },
];

const btt = () => <Tab panes={gfg} />;

export default btt;

Output:

Reference: https://react.semantic-ui.com/modules/tab