ReactJS Semantic UI Search 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 predefined CSS and JQuery to incorporate them into different frameworks.

In this article, we will learn how to use the Search Module in ReactJS Semantic UI. The Search Module helps a user to search for a query and fetch it.

Properties:

• Standard(Custom Render): Custom render is used for custom rendering and it displays the set of results for rendering.
• Category: Category properties are used to display categories of the remote content.
• Category(Custom Render): Category custom rendering is helpful for the Search for categories with custom rendering.

Syntax:

<Search />

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 a search module.

App.js

import React from 'react'
import { Search } 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);

const btt = () => (
 <div id='gfg'>
   <h1>GeeksforGeeks</h1>
   <h4>ReactJS semantic UI Search module</h4>
    <Search/>
 </div>
)
export default btt

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we are showing the size and loading property in a dropdown.

App.js

import React from 'react'
import { Search } 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);

const btt = () => (
 <div id='gfg'>
   <h1>GeeksforGeeks</h1>
   <h4>ReactJS semantic UI Search module</h4>
    <Search loading size='massive'/>
 </div>
)
export default btt</div>

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

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