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
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/ 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 i bootstrap
npm i reactstrap react react-dom
Import Bootstrap CSS in the src/index.js
file:
import 'bootstrap/dist/css/bootstrap.css';
Import required reactstrap components within src/App.js
file 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.js
redone using reactstrap.
Dependencies
Required Peer Dependencies
These libraries are not bundled with Reactstrap and required at runtime:
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.
-
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) => { return ( <p>This is a tooltip <TooltipTrigger tooltip={TooltipContent}>example</TooltipTrigger>!</p> ); } // Content passed in as children (Preferred) const PreferredExample = (props) => { return ( <p> This is a <a href="#" id="TooltipExample">tooltip</a> example. <Tooltip target="TooltipExample"> <TooltipContent/> </Tooltip> </p> ); }
-
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, tooltiptoggle
- callback for togglingisOpen
in the controlling componentcolor
- applies color classes, ex:<Button color="danger"/>
size
- for controlling size classes. ex:<Button size="sm"/>
tag
- customize component output by passing in an element name or Component- boolean based props (attributes) when possible for alternative style classes or
visually-hidden
content
Documentation
Documentation search is powered by Algolia's DocSearch.
CodeSandbox Examples
Here are some ready-to-go examples for CodeSandbox that you can experiment with.
https://github.com/reactstrap/code-sandbox-examples
Contributing
Development
Install dependencies:
npm install
Run examples at http://localhost:8080/ with webpack dev server:
npm start
Run tests & coverage report:
npm test
Watch tests:
npm run test-watch
Releasing
Release branches/versioning/notes will be automatically created and maintained by the release-please github action. When you're ready to publish the release, just merge the release branch. The release will be created, the new package will be published, and the updated docs will be deployed to https://reactstrap.github.io/.
In the wild
Organizations and projects using reactstrap
- airframe-react - demo - Airframe provides all the components a developer needs to build data-intensive web apps using React.
- component-template
- video-react
- CoreUI-Free-Bootstrap-Admin-Template - demo
- Admin dashboard example app built with reactstrap - demo
- DevExtreme React Grid - It's a stateless data grid built on top of
reactstrap
with paging, sorting, filtering, grouping, selection, editing and virtual scrolling features. - DevExtreme React Chart - A chart built on top of
reactstrap
that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more. - reactstrap-scrollspy - demo
- formstrap - demo - Let your
reactstrap
input component integrate seamlessly usingFormik
Submit a PR to add to this list!
Looking to build, document and publish reusable components built on top of reactstrap
? Consider forking https://github.com/reactstrap/component-template to kickstart your project!
Bundle using Rollup
Reactstrap currently bundles using Webpack and generates both a
lib
dir for individual imports and minified versions + source maps in thedist
dir.The current bundled and minified version of ReactStrap is 295kB (70.4kB gzipped). The individual transpiled components are great to cherry pick what you need into your project. However because they are individually transpiled, each of them will contain the Babel helpers which adds up quickly when importing multiple components. For example the transpiled Button component consists for almost 50% of Babel helpers.
Both Webpack 2 and Rollup support tree shaking. However, this is only supported when the imported dependency uses the ES6
import
andexport
statements instead of the CommonJSrequire
andexports
.This PR:
import
andexport
This gives the following benefits:
package.json
directivesjsnext:main
andmodule
to point at the ES build to allow Webpack 2 and Rollup do their tree shaking when bundling Reactstrap.main
will keep pointing at the CommonJS build for backwards compatibility.~~This is still experimental. Work left to be done:~~
Testing the changes
To test that the Rollup build works, we can run the tests against the bundled and minified build. To do so, first point all the imports at the bundled version (tested on my mac):
After that, run tests as usual.
Breaking changes
None! 💃
command failed with exit code 127.
My operating system: OSX 10.12.6 I followed the instructions on the main website on how to set up a react-strap project. I get the following output when trying to run: yarn start
Kyles-MacBook-Pro:sandbox1 kyle$ yarn start yarn run v1.3.2 $ react-scripts start /bin/sh: react-scripts: command not found error Command failed with exit code 127. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Toggle called from unmounted Tooltips
UncontrolledTooltip
#6.5.0
#16.3.2
What is happening?
Error message is being printed in the console because setState is being called on an unmounted component (UncontrolledTooltip).
What should be happening?
No error should be printed. The tooltip component methods "show" and "hide" should each check that the component is still mounted before calling "toggle" when they are called via "setTimeout", because "setTimeout" could trigger after the component has already been unmounted. This happens specifically with UncontrolledTooltip because it manages whether or not it is open using setState, however, in practice this could occur on any component which uses a Tooltip.
Steps to reproduce issue
Error message in console
warning.js:33 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in UncontrolledTooltip (created by [redacted]) [redacted] printWarning @ warning.js:33 warning @ warning.js:57 warnAboutUpdateOnUnmounted @ react-dom.development.js:11186 scheduleWorkImpl @ react-dom.development.js:12130 scheduleWork @ react-dom.development.js:12082 enqueueSetState @ react-dom.development.js:6644 Component.setState @ react.development.js:238 toggle @ reactstrap.es.js:5337 toggle @ reactstrap.es.js:4180 hide @ reactstrap.es.js:4123 setTimeout (async) onMouseLeaveTooltip @ reactstrap.es.js:4077
Thanks!
Tracking Beta 1 Changes
read through https://github.com/twbs/bootstrap/issues/21568
.card-block
to.card-body
https://github.com/twbs/bootstrap/pull/22828inverse
is no longer a thing, just use.text-white
(keep for convenience?).card-outeline-{color}
) is now border util.border-{color}
.card-{color}
) is now bg util.bg-{color}
.nav-fill
vertical
should accept a string for the responsive size (.flex-{size}-column
).card-header-tabs
/.card-header-pills
(add booleancard
prop?).navbar-inverse
->.navbar-dark
.navbar-toggler-left
and.navbar-toggler-right
have been removedNavbar
toggle class.navbar-toggleable{-sm|-md|-lg|-xl}
->.navbar-expand{-sm|-md|-lg|-xl}
.popover-title
to.popover-header
and.popover-content
to.popover-body
twbs/bootstrap#22829.show
is now needed on.dropdown-menu
when open.badge-default
->.badge-secondary
bootstrap v4 beta docs: https://getbootstrap.com/docs/4.0/getting-started/introduction/
The v5 branch will have the latest changes while the list is being completed. Items marked as completed on the list indicate that the item is addressed in the v5 branch. This issue will be closed one v5 has been merged into master.
Feel free to add anything not listed with a general description and link to either docs page or pr and I'll update the list 🙌
modal-open not being removed from body after closing modal
Modal
#6.5.0
es
#6.6.3
#4.1.3
What is happening?
The
modal-open
CSS class is not being removed from<body>
when I close a modal. Clicking on the header's "x" button (or any other means of closing the modal) causes the page to be unscrollable.What should be happening?
The
modal-open
style should be removed from the page when all modals are closed.Investigation
Tracing through the
Modal
code in Chrome devtools, what I saw was twoModal
instances being constructed but only oneModal
instance is actually being used. The firstModal
instance is being constructed by React but is never used after the constructor runs. It's being thrown away. None of its lifecycle methods are run. The secondModal
instance is being used normally and its lifecycle methods fire, but when it closes,Modal.openCount
is still nonzero so themodal-open
style is not removed from the<body>
.Looking at
Modal.js
code, I saw a problem which explained the behavior above. The Modal constructor contains a side effect: a call toinit()
which setsmodal-open
on the<body>
. The constructor (and henceinit()
) is being called twice, butdestroy()
is only being called once.I was able to resolve the problem by forking reactstrap and moving the call to
init()
from the end of the constructor to the beginning ofcomponentDidMount
:React advises against side effects in constructors. I suspect the behavior above may be one reason for this recommendation. Apparently, React can construct instances and throw them away without running any lifecycle methods!
I'm happy to prepare a PR to move Modal initialization into
componentDidMount()
. But there may be other reasons that I'm not aware of to use this non-recommended side effect in the constructor.Does anyone know the history of why
init()
is being called in the constructor instead of incomponentDidMount
where side effects and DOM manipulations are recommended?Steps to reproduce issue
Repro steps are difficult at the moment because the problem shows up in the middle of a fairly complicated project. To display a modal, my app pushes data into an array that's stored in React Context (the new 16.x kind, not the deprecated old context). Another part of the app will notice the change to Context and will transform each element in the array into one or more modals. When a modal is closed, the onClosed event handler will remove the data from the array in Context which will cause the modal to be unmounted.
I can pull this logic out of my app to provide a simpler repro, but doing this will take some time so (per discussion above) I wanted to understand more about the reasons for initializing in the constructor before going through the trouble of creating a repro. Hope this is OK.
Error message in console
Code
See above-- this behavior is deeply nested inside my app, so it's non-trivial to pull it out. I can do it if needed, though.
UncontrolledDropdown in 8.0.0 does not find toggle function in this.context
UncontrolledDrownDown
#8.0.0
umd/csj/es
#16.4.1
#4.3.1
What is happening?
On clicking the dropdown button in the UncontrolledDropdown component, an unhandled exception is raised and the dropdown menu does not appear.
What should be happening?
On clicking the dropdown button, the dropdown menu should appear.
Steps to reproduce issue
Error message in console
Code
Roadmap to Stable Release
Some of these items include nested components, listing only top level sections.
tag
propEach component should have an individual issue to track status that contains the following
build breaks with 5.0.0-beta.2
Issue description
#5.0.0-beta.2
es
#16.2.0
#4.0.0
What is happening?
when building with gulp + browserify this happens:
5.0.0-beta
everything is fine5.0.0-beta.2
the build breaksthe strange thing is that react-popper was updated from 0.8.1 to 0.8.2 to "fix: build" (see https://github.com/souporserious/react-popper/commit/0d97929b038b1bba69f920772505f8d6af158f3f), while reactstrap's commit b515e6b says "chore(build): downgrade react-popper to fix build"
V5
Anyone and everyone please review and give feedback. Lots of changes and descriptive commit messages with deprecations and breaking changes information (which I hope get automatically added to the release notes).
Tests have been updated Docs have been (mostly) updated.
closes #487, closes #529, closes #539, closes #113, closes #337, closes #424, closes #465, closes #438, closes #466, closes #502, closes #532, closes #535, closes #563, closes #548, closes #551, closes #485, closes #583 (Have to put keyword in front of every issue number... why can't it just be comma seprated)
NavLink and React Router - results in complete site reload
Issue description
Hello, i have a problem with the combination of react router and reactstrap. Routing does not work properly when you create a link without the
<Link to="XXX">
method. When I use reactstrap the entirely site reloads its content.[email protected]
[email protected]
( additionally use[email protected]
)NavLink
, maybe others withhref
attributeSteps to reproduce issue
Example:
Resulting html from NavLink (reactstrap) and Link (react-router):
I could use the Link component and add manually the
className="nav-link"
but it would be great if you can provide me a better solution for this problem.Thanks in advance Dennis
Carousel Component captions overflow
Carousel
9.0.0
17.0.2
5.1.0
What is happening?
What should be happening?
Steps to reproduce issue
Error message in console
fix(#2664): close offcanvas when fade is false
2431 remove margin bottom form group v2
Relates to issue #2431. Adds
noMargin
property to FormGroup to allow removal ofmb-3
class.fix(docs): remove errors in storybook
chore(deps-dev): bump @babel/core from 7.15.5 to 7.20.7
Bumps @babel/core from 7.15.5 to 7.20.7.
Release notes
Sourced from
@babel/core
's releases.... (truncated)
Changelog
Sourced from
@babel/core
's changelog.... (truncated)
Commits
d414940
v7.20.76757a60
Rewritetransform-block-scoping
plugin (#15200)362451b
chore: Enable eslint ruleno-unnecessary-type-assertion
(#15260)e5e1369
fix: Computed properties should keep original definition order (#15232)29a97b8
v7.20.5f6546d7
Bump typescript to 4.9.3 (#15202)5f19f62
Bump babel deps (#15187)12a58cb
v7.20.277f3700
fix:@babel/node
repl and enableno-use-before-define
rule (#15124)aadd7a3
v7.19.6Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)fix(#2660): dropdown closes for complex children
fix(#1289): prevent error in Strict Mode