ReactJS Semantic UI Search Module - GeeksforGeeks

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.
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
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.cd foldername
cd foldername
Step 3: Install semantic UI in your given directory. npm install semantic-ui-react semantic-ui-css
 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
Semantic-UI
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
How to create a link in JavaScript ?
How to Show Images on Click using HTML ?
How to remove an HTML element using JavaScript ?
Remove elements from a JavaScript Array
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
How to pass data from one component to other component in ReactJS ?
How to navigate on path by button click in react router ?