Blog

  • Introduction of ReactStrap

    Posted by Damini Sharma | Last Updated: 17-Jan-19

    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:


    Installation
    NPM
    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.

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

    https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js


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

    React
    ReactTransitionGroup
    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, https://popper.js.org/ via https://github.com/souporserious/react-popper 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 (
        <p>
          This is a <a href="#" id="TooltipExample">tooltip</a> example.
          <Tooltip target="TooltipExample">
            <TooltipContent/>
          </Tooltip>
        </p>
      );
    }
    

    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.

    Examples:

    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

Tags: javascript