Introduction of ReactStrap

Posted By Damini Sharma | 31-Jul-2018

The Twitter Bootstrap CSS Framework is and will be one of the most awesome and known HTML, CSS and JavaScript frameworks that can be used as a boilerplate for creating websites or web applications. The main features of the frameworks are base HTML and CSS for typography, icons, forms, buttons, tables, layout grids, and navigation, along with custom-built jquery-plugins and support for responsive layouts. If you are working on some React project and want to make your life easier when designing the user interface using Bootstrap, we have good news for you. Today, it's possible to use the latest version of Bootstrap as React components. We are talking about Reactstrap. This library will help you to work in the Reactjs way while using the awesome, latest and easy to use Bootstrap v4 features.

The Reactstrap implements all of the Bootstrap 4 components as React components, so they can be easily incorporated into your application. It doesn't depend on jQuery, so your code will be kept as clean as possible. However, it does relies on Tether (a dependency of Bootstrap) to produce efficient and nice tooltips. To install it, switch to the directory of your project with the terminal and executing the following command:

Install reactstrap and peer dependencies via NPM

npm install --save reactstrap react react-dom
Import the components you need

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger</Button>

Getting Started with Create React App

Follow the create-react-app instructions up to the Adding Bootstrap section and follow the reactstrap version of adding bootstrap.

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start
Then open http://localhost:3000/ to see your app. The initial structure of your app is setup. Next, let's add reactstrap and bootstrap.

Adding Bootstrap
Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap's CSS so this needs to be installed as well:

npm install bootstrap --save
npm install --save reactstrap react react-dom
Import Bootstrap's CSS in the src/index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';
Import required reactstrap components within the src/App.js file or your custom component files:

import { Button } from 'reactstrap';

Now you are ready to use the imported reactstrap's components within your component hierarchy defined in the render method.

Reactstrap can be included directly in your application's bundle or linked directly to a CDN.

Note:  be sure to include the required dependencies as necessary prior to the Reactstrap library when using the external CDN library:

Check out the demo here

About the Project
This library contains React Bootstrap 4 components which favors composition and control. The library does not depend upon jQuery or Bootstrap's javascript. However, via is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.

In order to make the most out of this library, there are a few core concepts to understand.

1)Your content has expected to be composed via props.children rather than using named props to pass in Components.

// Content passed in via props
const Example = (props) => {
  return (
    <p>This is a tooltip <TooltipTrigger tooltip={TooltipContent}>example</TooltipTrigger></p>

// Content passed in as children (Preferred)
const PreferredExample = (props) => {
  return (
      This is a <a href="#" id="TooltipExample">tooltip</a> example.
      <Tooltip target="TooltipExample">

2) HTML like Attributes in this library is used to pass in the state, conveniently apply modifier classes, enable advanced functionality (like popperjs), or automatically include non-content based elements.


isOpen - a prop specifies the current state for items like dropdown, popover, tooltip
toggle - a callback for toggling isOpen in the controlling component
color - applies bootstrap's color classes, ex: <Button color="danger"/>
size - for controlling size utilizig bootstrap's classes. ex: <Button size="sm"/>
tag - customize component output by passing in a html element name or a Component

Request for Proposal

Recaptcha is required.

Sending message..