Tutorial
Fancy Forms in React with Reactstrap
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
Reactstrap provides prebuilt Bootstrap 4 components that allow a great deal of flexibility and prebuilt validation. This allows us to quickly build beautiful forms that are guaranteed to impress and provide an intuitive user experience.
The series
- Part 1: Fancy Forms in React with Reactstrap
- Part 2: Coming Soon: NPM Fort Awesome Using Font Awesome 5.0
Getting Started
For this post, we’re going to assume you’re using create-react-app
or something of the like. If you need help getting started, please refer to our article Getting Comfortable with Create React App.
First things first, let’s install reactstrap
:
$ npm install --save reactstrap react react-dom
create-react-app
requires Bootstrap to be installed. Here’s how:
$ npm install bootstrap --save
$ npm install --save reactstrap react react-dom
Or, you can also install everything needed using Yarn:
$ yarn add reactstrap react react-dom bootstrap
Next import Bootstrap into your src/index.js
file:
import 'bootstrap/dist/css/bootstrap.min.css';
Form Components
Reactstrap allows us to have prebuilt Form
components that include anything from your standard text Input
to a more advanced file upload Input
. In this example we are going to make a simple sign in form.
First import the Components
below from reactstrap
into your desired file. In this example, we will import Container
and Col
which are exactly what you think they are: Bootstrap’s handy dandy prebuilt layout! We will also import Form
, FormGroup
, Label
, Button
and Input
to use directly in our sign in form.
import {
Container, Col, Form,
FormGroup, Label, Input,
Button,
} from 'reactstrap';
Now that we have the required components, let’s dive right in.
Reactstrap takes in props
such as type
, name
, id
and placeholder
. Type defines the type of input such as file uploads, radio buttons, or even more specific text inputs such as email. When using specific input text types like password, Reactstrap automatically hides the input without any additional coding. Name is the key for the key value pair that will eventually be sent to our backend. ID is what we use when manipulating the DOM. Placeholder allows us to add example text to the input.
By implementing the code below (along with a little css), we’re off to the races with a pretty decent looking form:
import React, { Component } from 'react';
import {
Container, Col, Form,
FormGroup, Label, Input,
Button,
} from 'reactstrap';
import './App.css';
class App extends Component {
render() {
return (
<Container className="App">
<h2>Sign In</h2>
<Form className="form">
<Col>
<FormGroup>
<Label>Email</Label>
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="myemail@email.com"
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="********"
/>
</FormGroup>
</Col>
<Button>Submit</Button>
</Form>
</Container>
);
}
}
export default App;
With a little CSS, the result should look something like this. 🐊
Styling
Reactstrap provides multiple built-in ways to style our form components. Here are some of the key items that might come in handy.
- Colors: Just like Bootstrap, Reactstrap has built-in colors when using default
className
s likehas-success
. - InLine Form: Within
<Form>
we can add<Form inline>
to place yourLabel
andInput
in the same row. - Containers, Row, & Columns, Oh my!:
<Col>
is Reactstrap’s version of Column. This allows us to format for not only desktop, but also for mobile and tablet.
Validation and User Hints
Validation in Reactstrap is debatably one of the easiest plug and play features.
FormText
allows us to add additional indicator text above or below the field. For this example, I changed the Label
“Email” to “Username” and added FormText
as a helpful indication of what they should use as their username.
<FormText>Your username is most likely your email.</FormText>
FormFeedback
instantly validates fields. You have the flexibility to customize your input validation. In the example function below, we add a function with Regex to validate the email on the onChange
event, and set has-success
or has-danger
in state.
validateEmail(e) {
const emailRex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const { validate } = this.state
if (emailRex.test(e.target.value)) {
validate.emailState = 'has-success'
} else {
validate.emailState = 'has-danger'
}
this.setState({ validate })
}
To apply this to your Input
, just add the valid and/or invalid prop with your conditionals:
valid={ this.state.validate.emailState === 'has-success' }
invalid={ this.state.validate.emailState === 'has-danger' }
After adding the valid and invalid props, use FormFeedback
to display the success and/or failure text.
<FormFeedback valid>
That's a tasty looking email you've got there.
</FormFeedback>
<FormFeedback invalid>
Uh oh! Looks like there is an issue with your email. Please input a correct email.
</FormFeedback>
Now the user will get even more direction if they incorrectly enter the username, and using colors like we described above.
On the other side, if they enter the email correctly, they get the pleasant green text with congratulations.
Submitting the Form
Finally on submit we would typically submit the data to our database but in our example we console log the email using a submitForm
function. We recommend checking out the example repo for a better understanding of the onChange
and submitForm
functions.
submitForm(e) {
e.preventDefault();
console.log(`Email: ${ this.state.email }`)
}
For more information on Reactstrap, here’s a link to their documentation.
For the full example project, clone this repo.