Site icon CodeARIV

Create a Dropdown in React that Closes When Click Outside

Syamlal CM

React library is easier to learn. But when building a UI, some use cases will make us stuck. Here, we are going to discuss such a use case. Creating a Dropdown in React that closes when click outside.

Prerequisites

I believe that you are aware of web development and have basic knowledge in the React.js library, using the packages in React projects, etc.

Wha is our use case?

A picture can express 1000 words and a gif can make it double. The below gif will simply explain the use case that we are going to code.

It is common in most web applications with a login function. After logging in, the user sees his/her name on the right side of the navigation bar. Clicking it will open a dropdown with options.

Here, there is a navigation bar on the top side. We can also see the name “John” on the right side of the navigation bar. Clicking the name will open a dropdown.

Analyzing the file structure of the app we are going to build will make the development easier for you.

So let us start coding the app.

Create a new React project

The first step is setting up a React application on your system. This can be easily done using the NPX tool.

So, install Node.js on your system first and create a react application using NPX. Don’t bother about the term NPX, because it’s a tool coming with NPM(Node Package Manager) 5.2+ onwards which will install on your system with Node.js itself.

If you need further assistance in the installation of React on your system, use the below links.

Install React on Windows, Ubuntu, and macOS

npx create-react-app close-dropdown-click-outside

This command will create a react application with the project name close-dropdown-click-outside

Now enter the project directory and start the app.

cd close-dropdown-click-outside
npm start

It will open up the React application we have created in our browser window with the address https://localhost:3000. The port may vary if 3000 is busy.

Now we can use our favorite code editor to edit our project. I personally recommend Visual Studio Code.

Install react-clickoutside package

A package named react-clickoutside is the backbone of our app that enables the functionality of outside click.

So, install the package using the command below.

npm i react-onclickoutside

Add the Bootstsrap CDN

We are using the Bootstrap style for faster development. It’s better to use packages like react-bootstrap to integrate bootstrap with our React application. But here, we are using the Boostrap CDN that makes the process easier.

So open the index.html and inside the header tag, add the bootstrap CDN.

<header>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
...
</header>

So that the entire index.html will look the same as below.

See the gist on github.

Setup the Navigation bar

Here we are dividing the entire Navigation bar into 3 components. This will reduce the complexity of our app. The components we are going to make are,

DropdownList Component

This component is shown after we click on the Name “John” from the Navigation bar. It contains 3 menu items, Profile, Account, and Settings.

See the gist on github.

DropdownLink Component

We will place this component on the right side of the Navigation bar we are going to build.

Also, this is the most important component in our app that deals with the “click outside” function. We are using the react-onclickoutside package for this function.

import onClickOutside from "react-onclickoutside";

The state showDropdown will toggle with each click on the name “John“. The DropdownList component we created earlier will display when the showDropdown state is true.

<div>
      <div
        class="nav-item nav-link profile-link"
        onClick={() => setShowDropdown(!showDropdown)}
      >
        John
      </div>
      {showDropdown ? <DropdownList /> : null}
    </div>

Now, we can enter the important function of this app. The code inside DropdownLink.handleClickOutside will execute when clicking outside of the DropdownLink component.

Here, we need to hide the DropdownList when clicking outside. So we must make the state showDropdown to false. I have added the entire function below.

DropdownLink.handleClickOutside = () => {
    setShowDropdown(false);
  };

We also need to export the Component as below.

export default onClickOutside(DropdownLink, clickOutsideConfig);

So that the entire DropdownLink component will be like below.

See the gist on github.

Navigation component

Now we can import the DropdownLink component to a parent component Navigation.

See the gist on github.

Import the Navigation component to our App component

So, we have coded the entire functionality in our app and now we can add the Navigation component to our App component.

See the gist on github.

Adding some custom style

We have already added bootstrap CDN that makes our app a bit stylish. We are also adding some custom styles to our DropdownList component.

See the gist on github.

Codesandbox

Refer to the CodeSandbox link to view the live app. You can clone this project to your CodeSandbox account and edit the code also.

https://codesandbox.io/s/patient-forest-9u48e

GitHub

You can always refer to the GitHub repository to clone this project, refer to the code and work on top of it.

https://github.com/techomoro/close-dropdown-click-outside-react-example

Summary

So, we create a dropdown in react that closes when clicking outside. We are using the react-onclickoutside package for this function.

Exit mobile version