How to use reactstrap - 10 common examples

render() {
    const { className, cssModule, header, mainText, icon, color, children, variant, ...attributes } = this.props;

    // demo purposes only
    const padding = (variant === '0' ? { card: 'p-3', icon: 'p-3', lead: 'mt-2' } : (variant === '1' ? {
      card: 'p-0', icon: 'p-4', lead: 'pt-3',
    } : { card: 'p-0', icon: 'p-4 px-5', lead: 'pt-3' }));

    const card = { style: 'clearfix', color: color, icon: icon, classes: '' };
    card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule);

    const lead = { style: 'h5 mb-0', color: color, classes: '' };
    lead.classes = classNames(lead.style, 'text-' + card.color, padding.lead);

    const blockIcon = function (icon) {
      const classes = classNames(icon, 'bg-' + card.color, padding.icon, 'font-2xl mr-3 float-left');
      return (<i></i>);
    };

    return (
      
        
          {blockIcon(card.icon)}
          <p>{header}</p>
          <p>{mainText}</p>

render() {
    const {className, cssModule, header, icon, color, value, children, invert, ...attributes} = this.props;

    // demo purposes only
    const progress = {style: "", color: color, value: value};
    const card = {style: "", bgColor: "", icon: icon};

    if (invert) {
      progress.style = "progress-white";
      progress.color = "";
      card.style = "text-white";
      card.bgColor = 'bg-' + color;
    }

    const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
    progress.style = classNames("progress-xs mt-3 mb-0", progress.style);

    return (
      
        
          <div>
            <i></i>
          </div>
          <div>{ header }</div>
          <small>{ children }</small>
          <progress value="{" color="{">
        </progress>
      
    )
  }
}

} = this.props

    // demo purposes only
    const padding =
      variant === '0'
        ? { card: 'p-3', icon: 'p-3', lead: 'mt-2' }
        : variant === '1'
          ? {
            card: 'p-0',
            icon: 'p-4',
            lead: 'pt-3'
          }
          : { card: 'p-0', icon: 'p-4 px-5', lead: 'pt-3' }

    const card = { style: 'clearfix', color: color, icon: icon, classes: '' }
    card.classes = mapToCssModules(
      classNames(className, card.style, padding.card),
      cssModule
    )

    const lead = { style: 'h5 mb-0', color: color, classes: '' }
    lead.classes = classNames(lead.style, 'text-' + card.color, padding.lead, 'text-capitalize')

    const blockIcon = function (icon) {
      const classes = classNames(
        icon,
        'bg-' + card.color,
        padding.icon,
        'font-2xl mr-3 float-left'
      )
      return <i>
    }</i>

render() {
    const {className, cssModule, header, mainText, icon, color, footer, link, children, variant, ...attributes} = this.props;

    // demo purposes only
    const padding = (variant === '0' ? {card: "p-3", icon: "p-3", lead: "mt-2"} : ( variant === "1" ? {
      card: "p-0", icon: "p-4", lead: "pt-3" } : {card: "p-0", icon: "p-4 px-5", lead: "pt-3"}));

    const card = {style: "clearfix", color: color, icon: icon, classes: ""};
    card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule);

    const lead = {style: "h5 mb-0", color: color, classes: ""};
    lead.classes = classNames(lead.style, 'text-' + card.color, padding.lead);

    const blockIcon = function (icon) {
      const classes = classNames(icon, 'bg-' + card.color, padding.icon, "font-2xl mr-3 float-left");
      return (<i></i>);
    };

    const cardFooter = function () {
      if (footer) {
        return (
          
            <a href="{link}">View More
              <i></i></a>

render() {
    const {className, cssModule, header, mainText, smallText, color, value, children, variant, ...attributes} = this.props;

    // demo purposes only
    const progress = {style: "", color: color, value: value};
    const card = {style: "", bgColor: ""};

    if (variant === "inverse") {
      progress.style = "progress-white";
      progress.color = "";
      card.style = "text-white";
      card.bgColor = 'bg-' + color;
    }

    const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
    progress.style = classNames("progress-xs my-3", progress.style);

    return (
      
        
          <div>{ header }</div>
          <div>{ mainText }</div>
          <progress value="{" color="{">
          <small>{ smallText }</small>
          <div>{children}</div>
        </progress>
      
    )
  }
}

var icon = _ref.icon,
      className = _ref.className,
      attributes = _objectWithoutPropertiesLoose(_ref, ["icon", "className"]);

  var classes = classnames(className, {
    'btn-icon': icon
  });
  return React__default.createElement(reactstrap.Button, _extends({
    className: classes
  }, attributes));
};

Button.propTypes = propTypes$4;
Button.defaultProps = defaultProps$4;

var propTypes$5 = _extends({}, reactstrap.Collapse.propTypes, {
  // eslint-disable-line react/forbid-foreign-prop-types

  /** Indica se il componente Collapse è usato all'interno di un componente Header */
  header: PropTypes.bool,

  /** Indica se il menu HeaderNav sia aperto o meno. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
  inOpen: PropTypes.bool,

  /** Funzione chiamata su click di overlay dell'HeaderNav aperto. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
  onOverlayClick: PropTypes.func
});

var Collapse = function Collapse(_ref) {
  var header = _ref.header,
      className = _ref.className,
      navbar = _ref.navbar,

JvmThreads.prototype.render = function () {
        var wholeNumberFormat = this.props.wholeNumberFormat;
        var threadStats = this.state.threadStats;
        return (React.createElement("div", null,
            React.createElement("b", null, "Threads"),
            " (Total: ",
            threadStats.threadDumpAll,
            ")",
            ' ',
            React.createElement("p", null,
                React.createElement("span", null, "Runnable"),
                " ",
                threadStats.threadDumpRunnable),
            React.createElement(reactstrap_1.Progress, { animated: true, min: "0", value: threadStats.threadDumpRunnable, max: threadStats.threadDumpAll, color: "success" },
                React.createElement("span", null,
                    React.createElement(formatter_1.TextFormat, { value: threadStats.threadDumpRunnable * 100 / threadStats.threadDumpAll, type: "number", format: wholeNumberFormat }))),
            React.createElement("p", null,
                React.createElement("span", null, "Timed Waiting"),
                " (",
                threadStats.threadDumpTimedWaiting,
                ")"),
            React.createElement(reactstrap_1.Progress, { animated: true, min: "0", value: threadStats.threadDumpTimedWaiting, max: threadStats.threadDumpAll, color: "warning" },
                React.createElement("span", null,
                    React.createElement(formatter_1.TextFormat, { value: threadStats.threadDumpTimedWaiting * 100 / threadStats.threadDumpAll, type: "number", format: wholeNumberFormat }))),
            React.createElement("p", null,
                React.createElement("span", null, "Waiting"),
                " (",
                threadStats.threadDumpWaiting,
                ")"),
            React.createElement(reactstrap_1.Progress, { animated: true, min: "0", value: threadStats.threadDumpWaiting, max: threadStats.threadDumpAll, color: "warning" },

render() {
    const renderAst = new rehypeReact({
      createElement: React.createElement,
      components: {
        tooltipexample: TooltipExample, documentationtabs: DocumentationTabs, doctabpanel: DocumentationTabPanel, trippedtable: StrippedTable, buttondropdownopen: ButtonDropdownWrapperOpen, helmet: Helmet, togglecodeblock: ToggleCodeBlock, simplecodeblock: SimpleCodeBlock, codeblock: CodeBlock, mdbuttondropdown: ButtonDropdownWrapper, alert: reactstrap.Alert, badge: reactstrap.Badge, breadcrumb: reactstrap.Breadcrumb, breadcrumbitem: reactstrap.BreadcrumbItem, button: reactstrap.Button, buttondropdown: reactstrap.ButtonDropdown, buttongroup: reactstrap.ButtonGroup, buttontoolbar: reactstrap.ButtonToolbar, card: reactstrap.Card, cardblock: reactstrap.CardBlock, cardbody: reactstrap.CardBody, cardcolumns: reactstrap.CardColumns, carddeck: reactstrap.CardDeck, cardfooter: reactstrap.CardFooter, cardgroup: reactstrap.CardGroup, cardheader: reactstrap.CardHeader, cardimg: reactstrap.CardImg, cardimgoverlay: reactstrap.CardImgOverlay, cardlink: reactstrap.CardLink, cardsubtitle: reactstrap.CardSubtitle, cardtext: reactstrap.CardText, cardtitle: reactstrap.CardTitle, carousel: reactstrap.Carousel, carouselcaption: reactstrap.CarouselCaption, carouselcontrol: reactstrap.CarouselControl, carouselindicators: reactstrap.CarouselIndicators, carouselitem: reactstrap.CarouselItem, mdcol: reactstrap.Col, collapse: reactstrap.Collapse, container: reactstrap.Container, custominput: reactstrap.CustomInput, dropdown: reactstrap.Dropdown, dropdownitem: reactstrap.DropdownItem, dropdownmenu: reactstrap.DropdownMenu, dropdowntoggle: reactstrap.DropdownToggle, fade: reactstrap.Fade, form: reactstrap.Form, formfeedback: reactstrap.FormFeedback, formgroup: reactstrap.FormGroup, formtext: reactstrap.FormText, input: reactstrap.Input, inputgroup: reactstrap.InputGroup, inputgroupaddon: reactstrap.InputGroupAddon, inputgroupbutton: reactstrap.InputGroupButton, inputgroupbuttondropdown: reactstrap.InputGroupButtonDropdown, inputgrouptext: reactstrap.InputGroupText, jumbotron: reactstrap.Jumbotron, label: reactstrap.Label, listgroup: reactstrap.ListGroup, listgroupitem: reactstrap.ListGroupItem, listgroupitemheading: reactstrap.ListGroupItemHeading, listgroupitemtext: reactstrap.ListGroupItemText, media: reactstrap.Media, modal: reactstrap.Modal, modalbody: reactstrap.ModalBody, modalfooter: reactstrap.ModalFooter, modalheader: reactstrap.ModalHeader, reactnav: reactstrap.Nav, navbar: reactstrap.Navbar, navbarbrand: reactstrap.NavbarBrand, navbartoggler: reactstrap.NavbarToggler, navdropdown: reactstrap.NavDropdown, navitem: reactstrap.NavItem, navlink: reactstrap.NavLink, pagination: reactstrap.Pagination, paginationitem: reactstrap.PaginationItem, paginationlink: reactstrap.PaginationLink, popover: reactstrap.Popover, popoverbody: reactstrap.PopoverBody, popovercontent: reactstrap.PopoverContent, popoverheader: reactstrap.PopoverHeader, popovertitle: reactstrap.PopoverTitle, poppercontent: reactstrap.PopperContent, poppertargethelper: reactstrap.PopperTargetHelper, progress: reactstrap.Progress, row: reactstrap.Row, tabcontent: reactstrap.TabContent, table: reactstrap.Table, tabpane: reactstrap.TabPane, tooltip: reactstrap.Tooltip, uncontrolledalert: reactstrap.UncontrolledAlert, uncontrolledbuttondropdown: reactstrap.UncontrolledButtonDropdown, uncontrolledcarousel: reactstrap.UncontrolledCarousel, uncontrolledcollapse: reactstrap.UncontrolledCollapse, uncontrolleddropdown: reactstrap.UncontrolledDropdown, uncontrollednavdropdown: reactstrap.UncontrolledNavDropdown, uncontrolledtooltip: reactstrap.UncontrolledTooltip
      }
    }).Compiler;
    if (this.props.lang === "en") {
      return(
        
          <main role="main" id="main-content">
            {renderAst(this.props.eng.htmlAst)}
          </main>
          <footer>
        
      );
    } else {
      return(
        
          <main role="main" id="main-content">
            {renderAst(this.props.fr.htmlAst)}</main></footer>

React.createElement("span", null, key),
                    " (",
                    React.createElement(formatter_1.TextFormat, { value: jvmMetrics[key].used / 1048576, type: "number", format: wholeNumberFormat }),
                    "M /",
                    ' ',
                    React.createElement(formatter_1.TextFormat, { value: jvmMetrics[key].max / 1048576, type: "number", format: wholeNumberFormat }),
                    "M)")) : (React.createElement("span", null,
                    React.createElement("span", null, key),
                    " ",
                    React.createElement(formatter_1.TextFormat, { value: jvmMetrics[key].used / 1048576, type: "number", format: wholeNumberFormat }),
                    "M")),
                React.createElement("div", null,
                    "Committed : ",
                    React.createElement(formatter_1.TextFormat, { value: jvmMetrics[key].committed / 1048576, type: "number", format: wholeNumberFormat }),
                    "M"),
                jvmMetrics[key].max !== -1 ? (React.createElement(reactstrap_1.Progress, { animated: true, value: jvmMetrics[key].used, min: "0", max: jvmMetrics[key].max, color: "success" },
                    React.createElement("span", null,
                        React.createElement(formatter_1.TextFormat, { value: jvmMetrics[key].used * 100 / jvmMetrics[key].max, type: "number", format: wholeNumberFormat }),
                        "%"))) : (''))); })));
    };

React.createElement("tbody", null, Object.keys(requestMetrics.percode).map(function (key, index) { return (React.createElement("tr", { key: index },
                    React.createElement("td", null, key),
                    React.createElement("td", null,
                        React.createElement(reactstrap_1.Progress, { min: "0", max: requestMetrics.all.count, value: requestMetrics.percode[key].count, color: "success", animated: true },
                            React.createElement("span", null,
                                React.createElement(formatter_1.TextFormat, { value: requestMetrics.percode[key].count, type: "number", format: wholeNumberFormat })))),
                    React.createElement("td", { className: "text-right" },
                        React.createElement(formatter_1.TextFormat, { value: _this.filterNaN(requestMetrics.percode[key].mean), type: "number", format: twoDigitAfterPointFormat })),
                    React.createElement("td", { className: "text-right" },
                        React.createElement(formatter_1.TextFormat, { value: _this.filterNaN(requestMetrics.percode[key].max), type: "number", format: twoDigitAfterPointFormat })))); })))));
    };