@rootbank/rootstrap

Rootstrap

Stateless React Components for Bootstrap 4, based on reactstrap.

Getting Started

tl;dr

npm i -S @rootbank/rootstrap@latest

Dependencies

Required Peer Dependencies

These libraries are not bundled with Rootstrap and required at runtime:

• react
• react-dom

About the Project

This library contains React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. However, Poppers.js via react-popper is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.

There are a few core concepts to understand in order to make the most out of this library.

• Your content is 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>
    );
  }
  

• Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like tether), or automatically include non-content based elements.

  Examples:

  • isOpen - current state for items like dropdown, popover, tooltip
  • toggle - callback for toggling isOpen in the controlling component
  • color - applies color classes, ex: <Button color="danger"/>
  • size - for controlling size classes. ex: <Button size="sm"/>
  • tag - customize component output by passing in an element name or Component
  • boolean based props (attributes) when possible for alternative style classes or sr-only content

Documentation

https://rootstrap.root.co.za/