+ 
+
reactstrap
++ Easy to use React Bootstrap 4 components +
++ + + +
+ +
-
-
reactstrap
-- Easy to use React Bootstrap 4 components -
-- - -
- -Installation
--
NPM
-Install reactstrap and peer dependencies via NPM
-++
-+ Installation
+
+NPM
+Install reactstrap and peer dependencies via NPM
+-npm install --save reactstrap react react-dom Import the components you need
---- +Import the components you need
++++ -{importBasic} Getting Started with Create React App
-Follow the Create React App instructions and then follow the Adding Bootstrap instructions.
-tl;dr
-+Getting Started with Create React App
+Follow the Create React App instructions and then follow the Adding Bootstrap instructions.
+tl;dr
+-{`npx create-react-app my-app cd my-app npm start`} - 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:
-++ 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:
+-{`npm install --save bootstrap npm install --save reactstrap react react-dom`} Import Bootstrap CSS in the
-src/index.jsfile:+Import Bootstrap CSS in the
+src/index.jsfile:-import 'bootstrap/dist/css/bootstrap.min.css'; Import required reactstrap components within
-src/App.jsfile or your custom component files:+Import required reactstrap components within
+src/App.jsfile or your custom component files:-{`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.jsredone using reactstrap.CDN
-Reactstrap can be included directly in your application's bundle or excluded during compilation and linked directly to a CDN.
-+Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example
+App.jsredone using reactstrap.CDN
+Reactstrap can be included directly in your application's bundle or excluded during compilation and linked directly to a CDN.
+-https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js --- Note: When using the external CDN library, be sure to include the required dependencies as necessary prior to the Reactstrap library: -
--
-- React
-- ReactTransitionGroup
-Check out the demo here
-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, https://popper.js.org/ via https://github.com/souporserious/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.
-++++ Note: When using the external CDN library, be sure to include the required dependencies as necessary prior to the Reactstrap library: +
++
+- React
+- ReactTransitionGroup
+Check out the demo here
+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, https://popper.js.org/ via https://github.com/souporserious/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.
+-{`// Content passed in via props const Example = (props) => { @@ -123,21 +124,21 @@ const PreferredExample = (props) => { }`} - 2) Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like popperjs), 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:{''}- -
sizefor controlling size classes. ex:{''}- -
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
-
+ 2) Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like popperjs), 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:{''}
+ sizefor controlling size classes. ex:{''}
+ 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 +
+