Reactstrap — Dropdowns

Image for post
Image for post
Photo by Mike Peters on Unsplash

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add dropdowns with Reactstrap.

Dropdowns

We can add dropdowns with the Dropdown , DropdownToggle , DropdownMenu and DropdownItem components.

For example, we can write:

We have the Dropdown component with the isOpen prop to control its opening state.

toggle has the function to toggle the dropdownOpen state to toggle the dropdown.

DropdownMenu has the menu.

DropdownItem has the menu item.

The divider prop turns it into a divider.

The disabled prop makes the action disabled.

DropdownToggle has the dropdown toggle.

Alignment

We can align the menu with some props.

To make it align to the right, we can use the right prop on the DropdownMenu :

Menu Headers

The header prop adds the menu header as we can see from the menu above.

Sizing

The size of the button can change.

For example, we can set the size to lg to make the button large:

The size prop is added to the Dropdown .

Custom Dropdown

We can put different elements into the DropdownMenu component.

For example, we can write:

We have divs inside the DropdownMenu instead of DropdownItem s.

Uncontrolled Dropdown

We can add uncontrolled dropdowns to our app.

They’re useful for situations when we don’t have control the dropdown state programmatically.

For example, we can write:

We use the UncontrolledDropdown component to add an uncontrolled dropdown.

Drop Direction Variations

Dropdowns can be displayed in different directions.

We can change it with the direction prop.

For example, we can write:

We set the direction with the direction prop.

The caret adds the arrow in the correct direction.

Conclusion

We can add dropdowns that are displayed the way we want.

They can be displayed in any direction.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store