reactstrap

Simple React Bootstrap 5 components

ReactComponent ToolkitBootstrap
reactstrap/reactstrapreactstrap.github.ioreactstrap

README

reactstrap
NPM Version Build Status Coverage Status License

reactstrap


Stateless React Components for Bootstrap 5.

If you're using Bootstrap 4, you'll need to use Reactstrap v8

Getting Started


Follow the create-react-app instructions to get started and then follow the reactstrap version of adding bootstrap.

tl;dr


  1. ```
  2. npx create-react-app my-app
  3. cd my-app/
  4. npm start
  5. ```
or,  if npx (Node >= 6 and npm >= 5.2 ) not available

  1. ```
  2. npm install -g create-react-app

  4. create-react-app my-app
  5. cd my-app/
  6. npm start
  7. ```

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 CSS so this needs to be installed as well:

  1. ```
  2. npm i bootstrap
  3. npm i reactstrap react react-dom
  4. ```

Import Bootstrap CSS in the src/index.js file:

  1. ``` js
  2. import 'bootstrap/dist/css/bootstrap.css';
  3. ```

Import required reactstrap components within src/App.js file or your custom component files:

  1. ``` js
  2. import { Button } from 'reactstrap';
  3. ```

Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render
method. Here is an example [App.js](https://gist.github.com/Thomas-Smyth/006fd507a7295f17a8473451938f9935) redone
using reactstrap.

Dependencies


Required Peer Dependencies

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

  [react](https://www.npmjs.com/package/react)
  [react-dom](https://www.npmjs.com/package/react-dom)

About the Project


This library contains React Bootstrap 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.

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

  1. ``` js
  2.     // Content passed in via props
  3.     const Example = (props) => {
  4.       return (
  5.         <p>This is a tooltip <TooltipTrigger tooltip={TooltipContent}>example</TooltipTrigger>!p>
  6.       );
  7.     }

  9.     // Content passed in as children (Preferred)
  10.     const PreferredExample = (props) => {
  11.       return (
  12.         <p>
  13.           This is a <a href="#" id="TooltipExample">tooltip</a> example.
  14.           <Tooltip target="TooltipExample">
  15.             <TooltipContent/>
  16.           </Tooltip>
  17.         </p>
  18.       );
  19.     }
  20. ```

2. 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: `