JSFeeds: alligator.io - Fancy Forms in React with Reactstrap

Tuesday, 3 July, 2018 UTC

Fancy Forms in React with Reactstrap

Summary

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="[email protected]" /> </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 classNames like has-success.
InLine Form: Within <Form> we can add <Form inline> to place your Label and Input 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 biff 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.

👉 Stay tuned for our follow up post on making an even snazzier form by adding Font Awesome 5.0 icons.

... more @ alligator.io

alligator.io