Reactstrap — Button Dropdowns

Image for post
Image for post
Photo by Iñigo De la Maza 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 button dropdowns with Reactstrap.

Button Dropdown

We can add a button dropdown with the ButtonDropdown component.

For example, we can write:

to add the button dropdown.

We add the ButtonDropdown component with the isOpen prop controlling when it’s open.

toggle has the function to toggle the dropdown on or off.

DropdownToggle has the dropdown toggle button.

DropdownMenu has the dropdown menu.

DropdownItem has the dropdown item.

header makes an item styled as the header.

disabled makes it disabled.

divider adds a divider.

caret adds the down arrow to the toggle button.

We can change the color prop to change style of the button.

For example, we can write:

to add the color prop and set it to 'primary' .

This will make the dropdown toggle button blue.

Split Button Dropdowns

We can add a split toggle button for the dropdown toggle.

We can do that by adding a Button and DropdownToggle buttons.

For example, we write:

We add the ButtonDropdown component with the Button inside.

Also, we have the DropdownToggle with the caret to show the down arrow.

Now we can only click on the DropdownToggle to click the dropdown.

Sizing

The size of the dropdown toggle button can change.

To change it, we use the size prop.

For instance, we can write:

We gave the size prop on the DropdownToggle set to lg to make it large.

Also, we can set the toggle size to sm to make it small:

Uncontrolled Dropdown

A button dropdown can be uncontrolled.

We can import the UncontrolledButtonDropdown to add one:

We use the UncontroleldButtonDropdown without any props.

It’ll toggle the dropdown on and off without setting any props.

If we don’t need to manipulate the dropdown programmatically then we can use this.

Drop Direction Variations

The menu can be displayed in any direction.

It can show above the button, or to the right or left, in addition to being below the button.

For instance, we can write:

to add those varieties.

We added the direction prop so that we change the menu orientation.

Conclusion

Button dropdowns is a component that comes with Reactstrap.

We can change the orientation and color of them.

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