Reactstrap — Custom Inputs and Input Groups

Image for post
Image for post
Photo by Anna Gru 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 custom inputs and input groups with Reactstrap.

Custom Inputs

We can add custom inputs to our app.

For example, we can write:

We use the CustomInput component with various props.

type has the type of input to render.

It also takes options as children if the type is select .

We can make inputs inline with the inline prop.

If the type is set to switch , them we get a switch.

Input Group

Input groups are containers for inputs.

We can put content other than inputs inside input groups in addition to inputs itself.

For example, we can write:

We have the InputGroup component to use as the input group container.

InputGroupText has the content for the input group addon.

We can have text or other elements inside it.

InputGroupAddon has the addons on each side.

addonType specifies the side that it’ll be on.

If it’s prepend , it’ll be on the left side.

If it’s append , then it’ll be on the right side.

Addon Sizing

The size of the addon can be changed.

For example, we can write:

to change their size with the size prop.

The prop is on the InputGroup component so that the sizing applies to everything inside.

Image for post
Image for post
Photo by Bruce Warrington on Unsplash

Conclusion

We can add custom inputs add inputs flexibly.

Also, we can add input groups to add elements to the left or right of the input.

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