ReactJS Semantic UI Dropdown Component example

Semantic UI is a UI component framework for ReactJS, it enables the developers to design a webpage. Semantic UI provides ready components to design a form or page like Form UI, Modal popup, Buttons, Icons, Dropdown, etc…, Today we are going to learn the Dropdown component. so let’s start semantic-ui-react dropdown

You can download the working example https://github.com/technostuf/semantic-ui-react-dropdown-demo

Create a React application
Install react-bootstrap library
Add code to the file
Run a React application

Create a React application

Create a React app using the following command.

 npx create-react-app semantic-ui-react-dropdown-demo

After running the above command system will create a new folder “semantic-ui-react-dropdown-demo” so you need to move into that folder, use the below command to change the directory.

 cd semantic-ui-react-dropdown-demo

Install semantic UI library

As we know we are building UI with a semantic UI library so we need to install it from npm

 npm install semantic-ui-react semantic-ui-css

Add code to the file

Create a component file to hold the semantic dropdown code separate from another component and put the below code into that file.

import React, { useState } from "react";
import { Dropdown } from 'semantic-ui-react'

const DropDownComponent = () => {
    const [selected, setSelected] = useState("in");

    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 countryOptions = [
        { key: 'af', value: 'af', flag: 'af', text: 'Afghanistan' },
        { key: 'in', value: 'in', flag: 'in', text: 'India' },
        { key: 'us', value: 'us', flag: 'us', text: 'United States' },
        { key: 'gb', value: 'gb', flag: 'gb', text: 'United Kingdom' },
    ]

    const onChange = (event, result) => {
        console.log("event", result.value);
        setSelected(result.value);
    };

    return (
        <div>
            <h1>Semantic UI React Example - technostuf.com</h1>
            <div style={{
                display: 'block', width: 700, padding: 30
            }}>
                <br />
                <Dropdown
                    name="country"
                    fluid
                    search
                    selection
                    options={countryOptions}
                    onChange={onChange}
                    value={selected}
                />
            </div>
        </div>
    )
}
export default DropDownComponent;

Semantic UI Dropdown gets selected value

onChange events trigger when the user selects the option from the dropdown, so we will get the selected item array in the resulting prop in the onChange method.

const onChange = (event, result) => {
        console.log("event", result.value);
        setSelected(result.value); 
    };

Finally, you have to call this component file into your code(App.js)

import './App.css';
import DropDownComponent from './DropDownComponent';
function App() {
  return (
    <div className="App">
      <DropDownComponent />
    </div>
  );
}
export default App;

Run a React application

Run the React application using the following command.

 npm start

After compilation, the program opens your browser and runs http://localhost:3000/

Output

You can download the working example of a ReactJS semantic UI dropdown component.

https://github.com/technostuf/semantic-ui-react-dropdown-demo