ReactJS Semantic UI Dropdown Module - GeeksforGeeks

28 Jun, 2021
Semantic UI is a modern framework used in developing seamless designs for the website, Its 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 see know how to use Dropdown Module in ReactJS Semantic UI. The Dropdown Module allows a user to select a value from a series of options
Properties:
Selection: We can select through a range of variety.
Search Selection: We can select through a range of variety by searching.
Multiple Selection: We can select through a multiple selection.
Multiple Search Selection: We can select through a multiple selection by search.
Clearable: We can make a dropdown which can be clearable.
Search Dropdown: We can make a dropdown which can be searchable.
Search In-Menu: We can make a dropdown which can be searchable by a menu.
Inline: We can make a dropdown which can be appeared in a line.
Pointing: We can make a dropdown which can be appeared as pointing.
Floating: We can make a dropdown which can be appeared as a floating.
Simple: We can make a simple dropdown.
States:
Loading: It is used for making a loading dropdown.
Error: It is used for making a dropdown with error.
Active: It is used for making an active dropdown.
Disabled: It is used for making a disabled dropdown,
 
Syntax:
<Dropdown text='content'/>
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 dropdown module by using ReactJS Semantic UI Dropdown Module.
App.js
import React from 'react'import { Dropdown, Icon } 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>    <div style={{            display: 'block', width: 700, padding: 30    }}>    <br/>    <Dropdown text='GeeksforGeeks'>    <Dropdown.Menu>      <Dropdown.Item text='ReactJS' icon='react' />      <Dropdown.Item text='AngularJS' icon='angular'/>      <Dropdown.Item text='HTML5' icon='html5' />      <Dropdown.Item text='JavaScript' icon='js' />      <Dropdown.Item text='NodeJS' icon='node'/>    </Dropdown.Menu>  </Dropdown></div></div>)  export default btt
Output: 
Example 2: In this example, we are showing the disabled state in a dropdown by using ReactJS Semantic UI Dropdown Module.
App.js
import React from 'react'import { Dropdown, Icon } 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>    <div style={{            display: 'block', width: 700, padding: 30    }}>    <br/>    <Dropdown text='GeeksforGeeks' disabled>    <Dropdown.Menu>      <Dropdown.Item text='ReactJS' icon='react' />      <Dropdown.Item text='AngularJS' icon='angular'/>      <Dropdown.Item text='HTML5' icon='html5' />      <Dropdown.Item text='JavaScript' icon='js' />      <Dropdown.Item text='NodeJS' icon='node'/>    </Dropdown.Menu>  </Dropdown></div></div>)  export default btt
Output:
Reference: https://react.semantic-ui.com/modules/dropdown
Semantic-UI
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript