0
This guide is the third part of the series Integrating Bootstrap with React. To learn about the basic integration of Bootstrap with React, you can refer to the first guide, Integrating Bootstrap with React - Part 1 and to learn about the third-party library for their integration you can refer to Integrating Bootstrap with React - Part 2.
In this successive guide, you will learn about a few of the Bootstrap style components available in React.
From the previous guides, you have gotten a sense of working with Reactstrap. Moving-ahead, there are numerous Bootstrap components that can be used along with the React. We shall be exploring them in a separate guide, but here you will get to know a few essential components and their application in the project. For instance, an app of contact list!
If you are looking for navigation bar components that are responsive, then you may count on Reactstrap Navigation Bars. Sub-components are also possible in a Navbar like Navltem, NavbarBrand, and Nav, etc. for the sake of making the organization of navigation links in a proper manner.
A <Navbar Toggler>
can be included inside the component of <Navbar>
, so as to see the NavBar is responsive. Thereafter, you can wrap the <Navklterms>
in the component of <Collapse>
.
The code given below depicts how React State and the component of Navbar can be used for the storage of toggle data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
export default class Example extends React.Component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.state = { isOpen: false }; } toggle() { this.setState({ isOpen: !this.state.isOpen }); } render() { return ( <div> <Navbar color = "faded" light expand = "md"> {/* Brandname */} <NavbarBrand href = "/"> Demo </NavbarBrand> {/* Add toggler to auto-collapse */} <NavbarToggler onClick = {this.toggle} /> <Collapse isOpen = {this.state.isOpen} navbar> {/*Pull left */} <Nav className = "ml-auto" navbar> <NavItem> <NavLink href = "/link/"> Left Nav Link </NavLink> </NavItem> </Nav> {/* Pull right */} <Nav className = "mr-auto" navbar> <UncontrolledDropdown nav inNavbar> <DropdownToggle nav caret> Bob </DropdownToggle> <DropdownMenu > <DropdownItem> Account </DropdownItem> <DropdownItem> Settings </DropdownItem> <DropdownItem divider /> <DropdownItem> Logout </DropdownItem> </DropdownMenu> </UncontrolledDropdown> </Nav> </Collapse> </Navbar> </div> ); } }
This component of the Reactstrap modal helps in creating the modal of Bootstrap, taking in use of the body, header, and footer.
Callbacks, and some props, are accepted by the modal in order to add interactive features to the window and, in addition, to making it closable.
The visibility of the modal is dependent on the isOpen
prop. When it comes to the component for controlling, the togglecallback
is used, so as to toggle the isOpen’s value.
Transition effects are added with the help of various other props. If you talk about the callbacks, they are onClosed
, OnEnter
, onOpened
and onExit
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
{/*For the modal to open, this.state.show should become true which is usually triggered by an onClick event */} {/* toggleModal would set state of show to false onClose*/} <Modal isOpen = {this.state.show} toggle = {this.toggleModal} > <ModalHeader toggle = {this.toggle} > Modal title </ModalHeader > <ModalBody > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nii ut af ex ea commodo consequat. </ModalBody > <ModalFooter > <Button color = "primary" onClick = {this.toggle} > Do Something </Button >{' '} <Button color="secondary" onClick = {this.toggle}> Cancel </Button > </ModalFooter > </Modal >
As far as the Reactstrap <Form>
is concerned, it could be horizontal or inline.
For rendering an <input>
element, the input component is taken in use. Numerous input components can be wrapped for features like accessing the features of FormGroup
, ensuring state validation, and ensuring proper space into a FormGroup
.
You should try setting labels by making use of <Label>
, as it is indeed a good option. If you wish to learn more about forms, then it’s better to go for its Bootstrap documentation.
The code for the same is given below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
<Form > <FormGroup row > <Label for = "exampleEmail" sm = {2} > Email </Label > <Col sm = {10} > <Input type = "email" name = "email" id = "exampleEmail" placeholder = "with a placeholder" /> </Col > </FormGroup > <FormGroup row > <Label for = "examplePassword" sm = {2} > Password </Label > <Col sm = {10} > <Input type = "password" name = "password" id = "examplePassword" placeholder = "password placeholder" /> </Col > </FormGroup > <FormGroup row > <Label for = "exampleSelect" sm = {2} >Select </Label > <Col sm = {10} > <Input type = "select" name = "select" id = "exampleSelect" /> </Col > </FormGroup > <FormGroup row > <Label for = "exampleSelectMulti" sm = {2} > Select Multiple </Label > <Col sm = {10} > <Input type = "select" name = "selectMulti" id = "exampleSelectMulti" multiple /> </Col > </FormGroup > <FormGroup row > <Label for = "exampleText" sm = {2} >Text Area </Label > <Col sm = {10} > <Input type = "textarea" name = "text" id = "exampleText" /> </Col > </FormGroup > </Form >
If you want to control or style React’s list items, then you can make use of the ListGrop of Reactstrap that helps in simplifying the process. The ListGroup again results in wrapping the ListGroupItems, so as to make them interactive with the help of onClick
callback.
The Code for the same is as below:
1 2 3 4 5
<ListGroup > <ListGroupItem > Item 1 </ListGroupItem > <ListGroupItem > Item 2 </ListGroupItem > <ListGroupItem > ... </ListGroupItem > </ListGroup >;
For any kind of designing framework, buttons constitute an important part. You have the component of Reactstrap <Button>
for the buttons. Besides the disabled and active properties, developers can make use of size and color in order to fix the style of button.
1 2 3 4 5 6 7 8 9 10
{/*ButtonToolbar helps to organize buttons */} <div> <Button color="primary">primary</Button>{' '} <Button color="secondary">secondary</Button>{' '} <Button color="success">success</Button>{' '} <Button color="info">info</Button>{' '} <Button color="warning">warning</Button>{' '} <Button color="danger">danger</Button>{' '} <Button color="link">link</Button> </div>
You should try to complete experiment on it, to make yourself acquainted with the concept of Reactstrap:
1 2 3 4 5 6
import React from "react"; import { render } from "react-dom"; import App from "./App"; import 'bootstrap/dist/css/bootstrap.css'; render(<App />, document.getElementById("root"));
In this guide, you have learned about a few of the available components in Reactstrap library, ending the guide with a contact list demo.
To revise the previous concepts, you can visit the previous guides of this series:
While writing this guide, the below-mentioned articles have been used for reference:
0
Test your skills. Learn something new. Get help. Repeat.
Start a FREE 10-day trial