Reactstrap — Dropdowns and Forms

Image for post
Image for post
Photo by Hans Vivek 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 and forms with Reactstrap.

Modifiers

We can add modifiers to style our dropdown.

To do that, we use the modifiers prop to change the dropdown:

We have the modifiers prop to change the height.

We have the setMaxHeight property that has an object with the enabled property to enable the modifier.

fn returns the style we want for styling the dropdown.

setActiveFromChild

We can use the setActiveFromChild prop to set the dropdown to active when any dropdown menu items are active.

For example, we can write:

We have the setActiveFromChild prop to make it active.

Fade

We can use the Fade component to show a fade effect for transitions.

For example, we can write:

We have the button to toggle the item in the Fade component.

This is done with the in prop.

It controls whether the item is displayed or not.

Form

Reactstrap comes with form components.

For example, we can write:

We have the form with the form groups.

Inside the form groups, we have the labels and inputs.

They’re all added with the Reactstrap components.

The tag prop lets us render form groups with a different tag.

The check prop lets us place checkboxes in the form group.

The Input component is used for adding all kinds of inputs.

The type of input is specified by the type prop.

Conclusion

We can set the modifiers prop to modify dropdowns.

Reactstrap comes with components for building forms.

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