Simple React Bootstrap 5 components

By reactstrap
Last update: Jan 8, 2023
Comments: 17

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, tooltip
- toggle - callback for toggling isOpen in the controlling component
- color - 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

https://reactstrap.github.io

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 using Formik

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!

Github

https://github.com/reactstrap/reactstrap

Comments(17)

1

Bundle using Rollup
Reactstrap currently bundles using Webpack and generates both a lib dir for individual imports and minified versions + source maps in the dist 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 and export statements instead of the CommonJS require and exports.

This PR:
- Adds a rollup config
- Updates the babel config to not transpile modules (~breaks current Webpack 1 builds~ fixed)
- Uses babeli instead of uglify for minifying because uglify does not support import and export
This gives the following benefits:
- Rollup produces smaller builds. A complete build is only 111kB (27kB gzipped) instead of 295kB!
- This allows us to create different builds at the same time: CommonJS, ES and UMD (probably don't care about UMD)
- We can use package.json directives jsnext:main and module 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:~~
- [ ] ~~Upgrade to Webpack 2 if we want to keep using the dev server or remove completely~~
- [x] Destructure React into PropTypes below all the imports
- [x] Fix all other things that broke because we no longer transpile modules.
- [x] Fork Tether and update package.json to use fork
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):
```
sed -i "" "s/\.\.\/\'/\.\.\/\.\.\/dist\/reactstrap.es'/" src/__tests__/*.spec.js
```
After that, run tests as usual.

Breaking changes

None! 💃
2

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.
3

Toggle called from unmounted Tooltips
- components: UncontrolledTooltip
- reactstrap version #6.5.0
- react version #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
1. Add UncontrolledTooltip to page
2. Cause tooltip to show
3. Perform an action which causes the tooltip to hide, then quickly perform an action which removes the tooltip entirely.
4. Observe the error in the logs.
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!
4

Tracking Beta 1 Changes
read through https://github.com/twbs/bootstrap/issues/21568
- Grid/Layout
  - [x] Column offsets are gone (but will be back again in bootstrap v4 beta 2)
- Card
  - [x] Renamed .card-block to .card-body https://github.com/twbs/bootstrap/pull/22828
  - [x] inverse is no longer a thing, just use .text-white (keep for convenience?)
  - [x] Outline (.card-outeline-{color}) is now border util .border-{color}
  - [x] Color (.card-{color}) is now bg util .bg-{color}
- Nav/NavBar
  - [x] nav now has .nav-fill
  - [x] nav vertical should accept a string for the responsive size (.flex-{size}-column)
  - [x] nav now has .card-header-tabs/.card-header-pills (add boolean card prop?)
  - [x] .navbar-inverse -> .navbar-dark
  - [x] .navbar-toggler-left and .navbar-toggler-right have been removed
  - [x] Navbar toggle class .navbar-toggleable{-sm|-md|-lg|-xl} -> .navbar-expand{-sm|-md|-lg|-xl}
- Popover
  - [x] Renamed .popover-title to .popover-header and .popover-content to .popover-body twbs/bootstrap#22829
  - [x] tether -> poppers.js
- Tooltip
  - [x] tether -> poppers.js
- Forms
  - [x] form validations (feedback and "server-side" classes)
- Dropdowns
  - [x] .show is now needed on .dropdown-menu when open
  - [x] tether -> poppers.js
- Badge
  - [x] .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 🙌
5

modal-open not being removed from body after closing modal
- components: Modal
- reactstrap version #6.5.0
- import method es
- react version #6.6.3
- bootstrap version #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 two Modal instances being constructed but only one Modal instance is actually being used. The first Modal 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 second Modal instance is being used normally and its lifecycle methods fire, but when it closes, Modal.openCount is still nonzero so the modal-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 to init() which sets modal-open on the <body>. The constructor (and hence init()) is being called twice, but destroy() 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 of componentDidMount:
```
class Modal extends React.Component {
  constructor(props) {
    super(props);

    this._element = null;
    this._originalBodyPadding = null;
    this.getFocusableChildren = this.getFocusableChildren.bind(this);
    this.handleBackdropClick = this.handleBackdropClick.bind(this);
    this.handleBackdropMouseDown = this.handleBackdropMouseDown.bind(this);
    this.handleEscape = this.handleEscape.bind(this);
    this.handleTab = this.handleTab.bind(this);
    this.onOpened = this.onOpened.bind(this);
    this.onClosed = this.onClosed.bind(this);

    this.state = {
      isOpen: props.isOpen,
    };

    // removed
    // if (this.props.isOpen) {
    //   this.init();
    // }
  }

  componentDidMount() {
    // added
    if (this.props.isOpen) {
      this.init();
    }

    if (this.props.onEnter) {
      this.props.onEnter();
    }

    if (this.state.isOpen && this.props.autoFocus) {
      this.setFocus();
    }

    this._isMounted = true;
  }
```
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 in componentDidMount 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
```
(none-- it's UI behavior, not an error, that's the problem)
```
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

components: UncontrolledDrownDown
reactstrap version #8.0.0
import method umd/csj/es
react version #16.4.1
bootstrap version #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

Render the UncontrolledDropdown as provided in the docs
Click on the button
Observe that the dropdown menu does not toggle open and that there is an exception in the consolee.

Error message in console

Uncaught TypeError: this.context.toggle is not a function
    at ProxyComponent.onClick (DropdownToggle.js:59)
    at ProxyComponent.onClick (react-hot-loader.development.js:693)
    at ProxyComponent.onClick (Button.js:52)
    at ProxyComponent.onClick (react-hot-loader.development.js:693)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
    at executeDispatch (react-dom.development.js:461)
    at executeDispatchesInOrder (react-dom.development.js:483)
    at executeDispatchesAndRelease (react-dom.development.js:581)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592)
    at forEachAccumulated (react-dom.development.js:562)
    at runEventsInBatch (react-dom.development.js:723)
    at runExtractedEventsInBatch (react-dom.development.js:732)
    at handleTopLevel (react-dom.development.js:4477)

Code

<UncontrolledDropdown>
                <DropdownToggle caret>
                    Dropdown
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem header>Header</DropdownItem>
                    <DropdownItem disabled>Action</DropdownItem>
                    <DropdownItem>Another Action</DropdownItem>
                    <DropdownItem divider />
                    <DropdownItem>Another Action</DropdownItem>
                </DropdownMenu>
            </UncontrolledDropdown>

7

Roadmap to Stable Release
Some of these items include nested components, listing only top level sections.
- [x] Tables
- [x] Container
- [x] Row
- [x] Col
- [x] Button
- [x] ButtonGroup
- [x] ButtonDropdown
- [x] Dropdown
- [x] Modal
- [x] Popover
- [x] Tag
- [x] Card
- [x] Tooltip
- [x] Navbar
- [x] Nav
  - [x] TabContent, TabPane
- [x] Forms (In Progress)
- [x] Jumbotron
- [x] InputGroup
- [x] Alert
- [x] MediaObject
- [x] Breadcrumb
- [x] Pagination
- [x] Progress
- [x] ListGroup
- [ ] Scrollspy
- [x] Collapse
- [x] Carousel
- [ ] Utilities
- [ ] Better Documentation for customizing component output with tag prop
Each component should have an individual issue to track status that contains the following
- any component names necessary
- propTypes for each component
- example react markup
8

build breaks with 5.0.0-beta.2
Issue description
- reactstrap version #5.0.0-beta.2
- import method es
- react version #16.2.0
- bootstrap version #4.0.0
What is happening?

when building with gulp + browserify this happens:
```
/Users/matteo/dev/my-project/node_modules/react-popper/lib/react-popper.js:1
export { default as Manager } from './Manager';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
```
- If I install 5.0.0-beta everything is fine
- If I install 5.0.0-beta.2 the build breaks
- If I manually install react-popper 0.8.2 and delete 0.8.1 everything is fine again
the 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"
9

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)
10

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.
- version [email protected] [email protected] ( additionally use [email protected])
- components: NavLink, maybe others with href attribute
Steps to reproduce issue
- create a simple react-router
- add two or more subpages
- create a nav with two links (one with NavLink and one with Link)
Example:
```
<Nav className="mr-auto" navbar>
   <NavItem>
      <NavLink href="/">Home</NavLink> // does not work
   </NavItem>
   <NavItem>
      <Link to="/another-site">Another Site</Link> // work as expected
   </NavItem>
</Nav>
```
Resulting html from NavLink (reactstrap) and Link (react-router):
```
<a href="/" class="nav-link">Home</a>
<a href="/another-link">Another Link</a>
```
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
11

Carousel Component captions overflow
- components: Carousel
- reactstrap version 9.0.0
- react version 17.0.2
- bootstrap version 5.1.0
What is happening?
- When using a carousel the captions are visible twice & overflow out of the component.
What should be happening?
- Captions shouldn't overflow out of the component.
Steps to reproduce issue
- Copy the code from documentation: https://reactstrap.github.io/?path=/docs/components-carousel--carousel
Error message in console
- Warning: Carousel.childContextTypes is specified but there is no getChildContext() method on the instance. You can either define getChildContext() on Carousel or remove childContextTypes from it.
12

fix(#2664): close offcanvas when fade is false
- [x] Bug fix
- [ ] New feature
- [ ] Chore
- [ ] Breaking change
- [x] There is an open issue which this change addresses
- [ ] I have read the CONTRIBUTING document.
- [ ] My commits follow the Git Commit Guidelines
- [ ] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
  - [ ] I have updated the documentation accordingly.
- [ ] My change requires a change to Typescript typings.
  - [ ] I have updated the typings accordingly.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.
13

2431 remove margin bottom form group v2
- [ ] Bug fix
- [x] New feature
- [ ] Chore
- [ ] Breaking change
- [ ] There is an open issue which this change addresses
- [x] I have read the CONTRIBUTING document.
- [x] My commits follow the Git Commit Guidelines
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
  - [ ] I have updated the documentation accordingly.
- [x] My change requires a change to Typescript typings.
  - [x] I have updated the typings accordingly.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.
Relates to issue #2431. Adds noMargin property to FormGroup to allow removal of mb-3 class.
14

fix(docs): remove errors in storybook
- removed errors that were shown in console in storybook
- [x] Bug fix
- [ ] New feature
- [ ] Chore
- [ ] Breaking change
- [ ] There is an open issue which this change addresses
- [x] I have read the CONTRIBUTING document.
- [x] My commits follow the Git Commit Guidelines
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
  - [ ] I have updated the documentation accordingly.
- [ ] My change requires a change to Typescript typings.
  - [ ] I have updated the typings accordingly.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.
15

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.
v7.20.7 (2022-12-22)

Thanks @wsypower for your first PR!

:eyeglasses: Spec Compliance
- babel-helper-member-expression-to-functions, babel-helper-replace-supers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes
  
  #15223 fix: Deleting super property should throw (@SuperSodaSea)
- babel-helpers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes, babel-plugin-transform-object-super
  
  #15241 fix: Throw correct error types from sed ant class TDZ helpers (@SuperSodaSea)
:bug: Bug Fix
- babel-parser, babel-plugin-transform-typescript
  
  #15209 fix: Support auto accessors with TypeScript annotations (@liuxingbaoyu)
- babel-traverse
  
  #15287 Fix .parentPath after rename in SwitchCase (@nicolo-ribaudo)
- babel-plugin-transform-typescript, babel-traverse
  
  #15284 fix: Ts import type and func with duplicate name (@liuxingbaoyu)
- babel-plugin-transform-block-scoping
  
  #15278 Fix tdz analysis for reassigned captured for bindings (@nicolo-ribaudo)
- babel-plugin-proposal-async-generator-functions, babel-preset-env
  
  #15235 fix: Transform for await with shadowed variables (@liuxingbaoyu)
- babel-generator, babel-plugin-proposal-optional-chaining
  
  #15258 fix: Correctly generate (a ?? b) as T (@liuxingbaoyu)
- babel-plugin-transform-react-jsx, babel-types
  
  #15233 fix: Emit correct sourcemap ranges for JSXText (@liuxingbaoyu)
- babel-core, babel-helpers, babel-plugin-transform-computed-properties, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  
  #15232 fix: Computed properties should keep original definition order (@SuperSodaSea)
- babel-helper-member-expression-to-functions, babel-helper-replace-supers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes
  
  #15223 fix: Deleting super property should throw (@SuperSodaSea)
- babel-generator
  
  #15216 fix: Print newlines for leading Comments of TSEnumMember (@liuxingbaoyu)
:nail_care: Polish
- babel-plugin-transform-block-scoping, babel-traverse
  
  #15275 Improve relative execution tracking in fn exprs (@nicolo-ribaudo)
:house: Internal
- babel-helper-define-map, babel-plugin-transform-property-mutators
  
  #15274 Inline & simplify @babel/helper-define-map (@nicolo-ribaudo)
- babel-core, babel-plugin-proposal-class-properties, babel-plugin-transform-block-scoping, babel-plugin-transform-classes, babel-plugin-transform-destructuring, babel-plugin-transform-parameters, babel-plugin-transform-regenerator, babel-plugin-transform-runtime, babel-preset-env, babel-traverse
  
  #15200 Rewrite transform-block-scoping plugin (@nicolo-ribaudo)
:running_woman: Performance
- babel-helper-compilation-targets
  
  #15228 perf: Speed up getTargets (@liuxingbaoyu)
Committers: 6
- Babel Bot (@babel-bot)
- Huáng Jùnliàng (@JLHwung)
- Nicolò Ribaudo (@nicolo-ribaudo)
... (truncated)
Changelog

Sourced from @babel/core's changelog.
v7.20.7 (2022-12-22)

:eyeglasses: Spec Compliance
- babel-helper-member-expression-to-functions, babel-helper-replace-supers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes
  
  #15223 fix: Deleting super property should throw (@SuperSodaSea)
- babel-helpers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes, babel-plugin-transform-object-super
  
  #15241 fix: Throw correct error types from sed ant class TDZ helpers (@SuperSodaSea)
:bug: Bug Fix
- babel-parser, babel-plugin-transform-typescript
  
  #15209 fix: Support auto accessors with TypeScript annotations (@liuxingbaoyu)
- babel-traverse
  
  #15287 Fix .parentPath after rename in SwitchCase (@nicolo-ribaudo)
- babel-plugin-transform-typescript, babel-traverse
  
  #15284 fix: Ts import type and func with duplicate name (@liuxingbaoyu)
- babel-plugin-transform-block-scoping
  
  #15278 Fix tdz analysis for reassigned captured for bindings (@nicolo-ribaudo)
- babel-plugin-proposal-async-generator-functions, babel-preset-env
  
  #15235 fix: Transform for await with shadowed variables (@liuxingbaoyu)
- babel-generator, babel-plugin-proposal-optional-chaining
  
  #15258 fix: Correctly generate (a ?? b) as T (@liuxingbaoyu)
- babel-plugin-transform-react-jsx, babel-types
  
  #15233 fix: Emit correct sourcemap ranges for JSXText (@liuxingbaoyu)
- babel-core, babel-helpers, babel-plugin-transform-computed-properties, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  
  #15232 fix: Computed properties should keep original definition order (@SuperSodaSea)
- babel-helper-member-expression-to-functions, babel-helper-replace-supers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes
  
  #15223 fix: Deleting super property should throw (@SuperSodaSea)
- babel-generator
  
  #15216 fix: Print newlines for leading Comments of TSEnumMember (@liuxingbaoyu)
:nail_care: Polish
- babel-plugin-transform-block-scoping, babel-traverse
  
  #15275 Improve relative execution tracking in fn exprs (@nicolo-ribaudo)
:house: Internal
- babel-helper-define-map, babel-plugin-transform-property-mutators
  
  #15274 Inline & simplify @babel/helper-define-map (@nicolo-ribaudo)
- babel-core, babel-plugin-proposal-class-properties, babel-plugin-transform-block-scoping, babel-plugin-transform-classes, babel-plugin-transform-destructuring, babel-plugin-transform-parameters, babel-plugin-transform-regenerator, babel-plugin-transform-runtime, babel-preset-env, babel-traverse
  
  #15200 Rewrite transform-block-scoping plugin (@nicolo-ribaudo)
:running_woman: Performance
- babel-helper-compilation-targets
  
  #15228 perf: Speed up getTargets (@liuxingbaoyu)
v7.20.6 (2022-11-28)

:bug: Bug Fix
- babel-helpers
  
  #15231 Update checkInRHS helper min version (@nicolo-ribaudo)
v7.20.5 (2022-11-28)
... (truncated)
Commits
- d414940 v7.20.7
- 6757a60 Rewrite transform-block-scoping plugin (#15200)
- 362451b chore: Enable eslint rule no-unnecessary-type-assertion (#15260)
- e5e1369 fix: Computed properties should keep original definition order (#15232)
- 29a97b8 v7.20.5
- f6546d7 Bump typescript to 4.9.3 (#15202)
- 5f19f62 Bump babel deps (#15187)
- 12a58cb v7.20.2
- 77f3700 fix: @babel/node repl and enable no-use-before-define rule (#15124)
- aadd7a3 v7.19.6
- Additional commits viewable in compare view
Dependabot 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)
16

fix(#2660): dropdown closes for complex children
- fix issue where if children of dropdown toggle where not simple strings the dropdown would remain open
- [x] Bug fix
- [ ] New feature
- [ ] Chore
- [ ] Breaking change
- [x] There is an open issue which this change addresses
- [x] I have read the CONTRIBUTING document.
- [x] My commits follow the Git Commit Guidelines
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
  - [ ] I have updated the documentation accordingly.
- [ ] My change requires a change to Typescript typings.
  - [ ] I have updated the typings accordingly.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.
17

fix(#1289): prevent error in Strict Mode
- remove findDomNode error which was thrown for components using Fade.js file in ReactStrict mode
- [x] Bug fix
- [ ] New feature
- [ ] Chore
- [ ] Breaking change
- [x] There is an open issue which this change addresses
- [x] I have read the CONTRIBUTING document.
- [x] My commits follow the Git Commit Guidelines
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
  - [ ] I have updated the documentation accordingly.
- [ ] My change requires a change to Typescript typings.
  - [ ] I have updated the typings accordingly.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.

Simple React Bootstrap 5 components

reactstrap

Getting Started

tl;dr

Adding Bootstrap

Dependencies

Required Peer Dependencies

About the Project

Development

Releasing

In the wild

Github

Comments(17)

Bundle using Rollup

Testing the changes

Breaking changes

command failed with exit code 127.

Toggle called from unmounted Tooltips

What is happening?

What should be happening?

Steps to reproduce issue

Error message in console

Tracking Beta 1 Changes

modal-open not being removed from body after closing modal

What is happening?

What should be happening?

Investigation

Steps to reproduce issue

Error message in console

Code

UncontrolledDropdown in 8.0.0 does not find toggle function in this.context

What is happening?

What should be happening?

Steps to reproduce issue

Error message in console

Code

Roadmap to Stable Release

build breaks with 5.0.0-beta.2

Issue description

What is happening?

V5

NavLink and React Router - results in complete site reload

Issue description

Steps to reproduce issue

Carousel Component captions overflow

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

fix(docs): remove errors in storybook

chore(deps-dev): bump @babel/core from 7.15.5 to 7.20.7

v7.20.7 (2022-12-22)

:eyeglasses: Spec Compliance

:bug: Bug Fix

:nail_care: Polish

:house: Internal

:running_woman: Performance

Committers: 6

v7.20.7 (2022-12-22)

:eyeglasses: Spec Compliance

:bug: Bug Fix

:nail_care: Polish

:house: Internal

:running_woman: Performance

v7.20.6 (2022-11-28)

:bug: Bug Fix

v7.20.5 (2022-11-28)

fix(#2660): dropdown closes for complex children

fix(#1289): prevent error in Strict Mode

Popular Tag

Related