[![reactstrap](https://cloud.githubusercontent.com/assets/399776/13906899/1de62f0c-ee9f-11e5-95c0-c515fee8e918.png)](https://reactstrap.github.io) [![NPM Version](https://img.shields.io/npm/v/reactstrap.svg?branch=master)](https://www.npmjs.com/package/reactstrap) [![Build Status](https://github.com/reactstrap/reactstrap/actions/workflows/test.yml/badge.svg?branch=master)](https://github.com/reactstrap/reactstrap) [![Coverage Status](https://coveralls.io/repos/github/reactstrap/reactstrap/badge.svg?branch=master)](https://coveralls.io/github/reactstrap/reactstrap?branch=master) [![License](https://img.shields.io/npm/l/reactstrap.svg)](https://github.com/reactstrap/reactstrap/blob/master/LICENSE) # reactstrap Stateless React Components for Bootstrap 5. If you're using Bootstrap 4, you'll need to use [Reactstrap v8](https://deploy-preview-2356--reactstrap.netlify.app/) ## Getting Started Follow the [create-react-app instructions](https://create-react-app.dev/docs/getting-started) to get started and then follow the reactstrap version of [adding bootstrap](#adding-bootstrap). ### tl;dr ``` npx create-react-app my-app cd my-app/ npm start ``` or, if npx (Node >= 6 and npm >= 5.2 ) not available ``` npm install -g create-react-app create-react-app my-app cd my-app/ npm start ``` Then open [http://localhost:3000/](http://localhost:3000/) to see your app. The initial structure of your app is setup. Next, let's [add reactstrap and bootstrap](#adding-bootstrap). ### Adding Bootstrap Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well: ``` npm i bootstrap npm i reactstrap react react-dom ``` Import Bootstrap CSS in the ```src/index.js``` file: ```js import 'bootstrap/dist/css/bootstrap.css'; ``` Import required reactstrap components within ```src/App.js``` file or your custom component files: ```js import { Button } from 'reactstrap'; ``` 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](https://popper.js.org/) via [react-popper](https://github.com/popperjs/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. ```js // Content passed in via props const Example = (props) => { return (

This is a tooltip example!

); } // Content passed in as children (Preferred) const PreferredExample = (props) => { return (

This is a tooltip example.

); } ``` 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: `

	Stars	Issues	Version	Updated	Created
@chakra-ui/react	36,708	284	2.8.2	6 months ago	4 years ago
gestalt	4,214	4	148.0.0	4 hours ago	12 years ago
reactstrap	10,571	299	9.2.2	4 months ago	8 years ago
tailwind	20	7	4.0.0	5 years ago	7 years ago

@chakra-ui/react vs gestalt vs reactstrap vs tailwind

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past