[![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			2.8.2	6 months ago	4 years ago
reactstrap	10,570	299	9.2.2	4 months ago	8 years ago
semantic-ui	51,003	1,079	2.5.0	2 years ago	10 years ago
tailwindcss	78,875	44	3.4.3	2 months ago	7 years ago

@chakra-ui/react vs reactstrap vs semantic-ui vs tailwindcss

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past