[![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	公開日時	ライセンス

reactstrap	437,001	10,558	2.22 MB	318	10ヶ月前	MIT