Skip to content
Related Articles

Related Articles

Improve Article

ReactJS Semantic UI Search Module

  • Last Updated : 27 Jul, 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 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 = 
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 = 
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




My Personal Notes arrow_drop_up
Recommended Articles
Page :