Simple React Bootstrap 4 components

Overview

reactstrap

CDNJS NPM Version Build Status Coverage Status License

reactstrap

Stateless React Components for Bootstrap 4.

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:

Optional Dependencies

These libraries are not included in the main distribution file reactstrap.min.js and need to be manually included when using components that require transitions or popover effects (e.g. Tooltip, Modal, etc).

CDN

If you prefer to include Reactstrap globally by marking reactstrap as external in your application, the reactstrap library provides various single-file distributions, which are hosted on the following CDNs:

<!-- Main version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.min.js"></script>

<!-- All optional dependencies version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js"></script>
<!-- Main version -->
<script src="https://unpkg.com/[email protected]/dist/reactstrap.min.js"></script>

<!-- All optional dependencies version -->
<script src="https://unpkg.com/[email protected]/dist/reactstrap.full.min.js"></script>

Note: To load a specific version of Reactstrap replace 6.0.1 with the version number.

Versions

Reactstrap has two primary distribution versions:

  1. reactstrap.min.js

    This file excludes the optional dependencies – react-popper and react-transition-group. This is the recommended approach (similar approach in Bootstrap's JavaScript components) for including Reactstrap as it reduces the filesize and gives more flexibility in configuring needed dependencies.

    Recommended use cases:

    • Small, medium, or large applications
    • Applications that do not use any transitions or popper components
    • Applications that directly use react-popper or react-transition-group – Reactstrap and your application will use the single global version included
  2. reactstrap.full.min.js

    This file includes the optional dependencies – react-popper and react-transition-group

    Recommended use cases:

    • Small applications

Example

<!doctype html>
<html lang="en">
  <head>
    <!-- Required dependencies -->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
    <!-- Optional dependencies -->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.2.1/react-transition-group.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-popper/0.10.4/umd/react-popper.min.js"></script>
    <!-- Reactstrap -->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.min.js"></script>
    <!-- Lastly, include your app's bundle -->
    <script type="text/javascript" src="/assets/bundle.js"></script>
  </head>
  <body>
    <div id="my-app" />
  </body>
</html>

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

  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) => {
      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>
      );
    }
  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: <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 sr-only 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

Create Release Branch

Note: you must have the GITHUB_TOKEN environment variable set to a valid GitHub token with write access to your repo.

To create a release branch and changelog, run the following command, optionally with a semantic release type (major, minor, patch) (if not provided, it will default to semver (it's best to let it default)):

./scripts/release <release-type>

Verify changelog in branch. Create a PR if everything looks good. Merge when tests are green.

Tagging and Publishing

Note: you must have write permission to this repo do perform this action

Once the release branch is merged, checkout master and run:

./scripts/publish

This will build the current state of master, tag it based on the release version and push the tag up to GitHub. Travis will detect the new tag and publish to npm.

OR

You can create a new tag via the GitHub user interface. If you do it this way, make sure to use the correct version as the tag name (eg. 6.2.0).

In the wild

Organizations and projects using reactstrap

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!

Issues
  • Bundle using Rollup

    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.

    image

    ~~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! 💃

    opened by balloob 40
  • command failed with exit code 127.

    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.

    opened by kingerking 29
  • Toggle called from unmounted Tooltips

    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!

    bug help wanted Hacktoberfest 
    opened by StephenLucasKnutson 27
  • Tracking Beta 1 Changes

    Tracking Beta 1 Changes

    read through https://github.com/twbs/bootstrap/issues/21568

    • Grid/Layout
    • 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 🙌

    help wanted PR Welcome 
    opened by eddywashere 25
  • modal-open not being removed from body after closing modal

    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.

    opened by justingrant 22
  • UncontrolledDropdown in 8.0.0 does not find toggle function in this.context

    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

    1. Render the UncontrolledDropdown as provided in the docs
    2. Click on the button
    3. 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>
    
    bug Hacktoberfest 
    opened by twheys 21
  • Roadmap to Stable Release

    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
    opened by eddywashere 21
  • build breaks with 5.0.0-beta.2

    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"

    opened by cvlmtg 20
  • NavLink and React Router - results in complete site reload

    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.

    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

    opened by HD-CMS 19
  • chore(deps-dev): bump @types/react from 16.9.51 to 17.0.37

    chore(deps-dev): bump @types/react from 16.9.51 to 17.0.37

    Bumps @types/react from 16.9.51 to 17.0.37.

    Commits

    Dependabot compatibility score

    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)
    dependencies 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump webpack from 4.46.0 to 5.64.3

    chore(deps-dev): bump webpack from 4.46.0 to 5.64.3

    Bumps webpack from 4.46.0 to 5.64.3.

    Release notes

    Sourced from webpack's releases.

    v5.64.3

    Performance

    • allow to use pre-compiled schema when Infinity is used in configuration
    • allow to use pre-compiled schema for configuration arrays

    v5.64.2

    Bugfixes

    • avoid double initial compilation due to invalid dependencies with managedPaths

    v5.64.1

    Bugfixes

    • fix regexp in managedPaths to exclude additional slash
    • make module.accept errorHandler optional in typings
    • correctly create an async chunk when using a require(...).property in require.ensure
    • fix cleaning of symlinks in output.clean: true
    • fix change detection with unsafeCache within managedPaths (node_modules)
    • bump webpack-sources for Stack Overflow bugfix

    v5.64.0

    Features

    • add asyncChunks: boolean option to disable creation of async chunks

    Bugfixes

    • fix ProfilingPlugin for experiments.backCompat: false

    Performance

    • avoid running regexp twice over the file list

    v5.63.0

    Features

    • allow passing chunkLoading: false to disable on-demand loading

    Bugfixes

    • fix import 'single-quote' in esm build dependencies

    v5.62.2

    Bugfixes

    • fix __system_context__ injection when using the library option on entrypoint
    • enable exportsPresence: "error" by default in futureDefaults
    • fix bad performance for a RegExp in Stats printing (with large error messages)
    • fix exportPresence -> exportsPresence typo

    ... (truncated)

    Commits
    • c66e4ce 5.64.3
    • cdd50a8 Merge pull request #14813 from webpack/bugfix/pre-compiled-schema
    • a26b3f8 fix pre-compiled schema validation for Infinity and arrays
    • 0065223 5.64.2
    • befeee9 Merge pull request #14777 from webpack/bugfix/double-compilation-managed-path
    • 200ab0e add test case
    • eee5ffc Merge pull request #14773 from webpack/dependabot/npm_and_yarn/acorn-8.6.0
    • 0010974 fix double compilation when snapshotting managedPaths
    • 4ca0971 chore(deps): bump acorn from 8.5.0 to 8.6.0
    • 64f2bdb Merge pull request #14746 from snitin315/rm-old-badges
    • Additional commits viewable in compare view

    Dependabot compatibility score

    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)
    dependencies 
    opened by dependabot[bot] 0
  • fix: use new react-transition-group api

    fix: use new react-transition-group api

    • [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.

    Update of react-transition-group does not solve warnings in StrictMode. react-transition-group has a new API that uses refs instead of findDOMNode

    This does not completely get rid of StrictMode warnings, it seems that Carousel is still using legacy context API. I made a PR related to this in the past, https://github.com/reactstrap/reactstrap/pull/1831 but the tests break

    Related #1289 Related #1340 Related #1992 Related #1289 Related #1833 Related #1468 Related #1738

    ps1: I am the author of new react-transition-api API that uses refs https://github.com/reactjs/react-transition-group/pull/559 ps2: I had access to this repo in the past, but I reset 2FA, and I lost access to it

    opened by iamandrewluca 0
  • Reactstrap Modal - Stylesheet Not Being Fully Applied With contentClassName Prop

    Reactstrap Modal - Stylesheet Not Being Fully Applied With contentClassName Prop

    Hello, I am using Modal and I just want to expand its size to 95% of the visible area.

    Currently, when applying the prop size="xl" to Modal, it is too small still for my needs. So, I found a potential solution on this page that showed applying a custom class coming from an external stylesheet into reactstrap Modal worked for him.

    After following this advice, I succeeded in making the modal expand to 95% of visible area. Unfortunately, refreshing the page caused the modal to snap back to size xl. And so, I need a solution which reliably makes the Modal apply the external stylesheet's styles and never 'snaps back' to xl.

    What I tried, and results...

    Adding the stylesheet to index.html as a <link /> in the /public folder. I added this: <link rel="stylesheet" href="%PUBLIC_URL%/styles.css"> Result: fail.

    I tried using styled-components. This failed for me because I had no success after trying to wrap divs around the modal which contained my styles. Perhaps there's a clever way of using Modal and styled-components to create a HOC that can do this task? Result: fail.

    Used React state and event handler and a button which, when clicked, applied and removed the custom class name I used custom-modal-style. The way used it was like so...

    import React, { useState, useEffect } from 'react';
    import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
    import './styles.css'
    
    const toggle = () => setModal(!modal);
    
    const ProductWizard = () =>
    {
        const [makeLarger, setMakeLarger] = useState(false);
        const [modal, setModal] = useState(false);
    
        return(
            <>
                <Button color="info" onClick={toggle}>Create Product</Button>
                <Modal 
                    size="xl" 
                    centered
                    scrollable
                    isOpen={modal} toggle={toggle} 
                    contentClassName={ makeLarger ? "custom-modal-style" : null }
                    // contentClassName="custom-modal-style" 
                    >...</Modal>
            </>
        )
        
    }
    

    Here are the styles.css stylesheet contents...

        .custom-modal-style {
            position: fixed;
            left: 5px;
            width: 98%;
            right: 5px;
            max-height: 100%;
            overflow: auto;
            overflow-y: scroll;
            display: block;
        }
    

    Result: fails to expand to 95% of the screen size, although it did slightly enlarge (by margin of around 20px to 30px).

    Can you provide a solution which causes the reactstrap Modal component to reliably expand to the dimensions of 95% of the screen size?

    opened by doverradio 0
  • chore(deps-dev): bump dtslint from 4.1.6 to 4.2.1

    chore(deps-dev): bump dtslint from 4.1.6 to 4.2.1

    Bumps dtslint from 4.1.6 to 4.2.1.

    Commits

    Dependabot compatibility score

    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)
    dependencies 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump eslint-plugin-react from 7.26.0 to 7.27.1

    chore(deps-dev): bump eslint-plugin-react from 7.26.0 to 7.27.1

    Bumps eslint-plugin-react from 7.26.0 to 7.27.1.

    Release notes

    Sourced from eslint-plugin-react's releases.

    v7.26.1

    What's Changed

    New Contributors

    Full Changelog: https://github.com/yannickcr/eslint-plugin-react/compare/v7.26.0...v7.26.1

    Changelog

    Sourced from eslint-plugin-react's changelog.

    7.27.1 - 2021.11.18

    Fixed

    • [no-invalid-html-attribute]: allow link rel to have apple-touch-icon, mask-icon (#3132[] @​ljharb)
    • [no-unused-class-component-methods]: add getChildContext lifecycle method (#3136[] @​yoyo837)
    • [prop-types]: fix false positives on renames in object destructuring (#3142[] @​golopot)
    • [no-arrow-function-lifecycle]: fix invalid autofix from a concise arrow method to a regular one (#3145[] @​ljharb)
    • [display-name]: avoid false positives on non-creatClass object expressions (#3144 @​ljharb)

    Changed

    #3145: yannickcr/eslint-plugin-react#3145 #3144: yannickcr/eslint-plugin-react#3144 #3142: yannickcr/eslint-plugin-react#3142 #3141: yannickcr/eslint-plugin-react#3141 #3136: yannickcr/eslint-plugin-react#3136 #3132: yannickcr/eslint-plugin-react#3132

    7.27.0 - 2021.11.09

    Added

    Fixed

    • propTypes: add VoidFunctionComponent to react generic list (#3092[] @​vedadeepta)
    • [jsx-fragments], [jsx-no-useless-fragment]: avoid a crash on fragment syntax in typescript-eslint parser (@​ljharb)
    • [jsx-props-no-multi-spaces]: avoid a crash on long member chains in tag names in typescript-eslint parser (@​ljharb)
    • [no-unused-prop-types], usedPropTypes: avoid crash with typescript-eslint parser (@​ljharb)
    • [display-name]: unwrap TS as expressions (#3110[] @​ljharb)
    • [destructuring-assignment]: detect refs nested in functions (#3102 @​ljharb)
    • [no-unstable-components]: improve handling of objects containing render function properties (#3111 @​fizwidget)
    • [prop-types], propTypes: add forwardRef prop-types (#3112 @​vedadeepta)
    • [no-typos]: prevent a crash when using private methods (@​ljharb)
    • [destructuring-assignment], component detection: improve component detection (#3122 @​vedadeepta)
    • [no-invalid-html-attribute]: avoid crash on spread props (#3126 @​ljharb)

    Changed

    #3126: yannickcr/eslint-plugin-react#3126 #3124: yannickcr/eslint-plugin-react#3124 #3122: yannickcr/eslint-plugin-react#3122

    ... (truncated)

    Commits
    • 94826da Update CHANGELOG and bump version
    • 893dbff [Fix] display-name: avoid false positives on non-creatClass object expressions
    • eb81897 [Fix] no-arrow-function-lifecycle: fix invalid autofix from a concise arrow...
    • 8f00023 [Fix] prop-types: fix false positives on renames in object destructuring
    • 0132c47 [readme] fix syntax typo
    • a2f8a35 [Fix] no-unused-class-component-methods: add getChildContext lifecycle me...
    • 87fe152 [Fix] no-invalid-html-attribute: allow link rel to have `apple-touch-ic...
    • 21e01b6 Update CHANGELOG and bump version
    • 10c0e6a [Dev Deps] update @babel/eslint-parser, @types/node
    • 9e12d2b [New] support eslint 8.x
    • Additional commits viewable in compare view

    Dependabot compatibility score

    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)
    dependencies 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump microbundle from 0.13.3 to 0.14.2

    chore(deps-dev): bump microbundle from 0.13.3 to 0.14.2

    Bumps microbundle from 0.13.3 to 0.14.2.

    Release notes

    Sourced from microbundle's releases.

    v0.14.2

    Patch Changes

    • dd0bdde #904 Thanks @​rschristian! - Added missing CLI doc for 'jsxImportSource' and correcting the Examples section of the '--help' output

    v0.14.1

    Patch Changes

    v0.14.0

    Minor Changes

    Patch Changes

    Changelog

    Sourced from microbundle's changelog.

    0.14.2

    Patch Changes

    • dd0bdde #904 Thanks @​rschristian! - Added missing CLI doc for 'jsxImportSource' and correcting the Examples section of the '--help' output

    0.14.1

    Patch Changes

    0.14.0

    Minor Changes

    Patch Changes

    • 96b85da #887 Thanks @​developit! - When using --target node, resolve "node" conditional Package Export keys, otherwise resolve "browser" keys.
    Commits
    • 778ca3c Version Packages (#911)
    • 75525a3 Add Teaful as "Built with Microbundle" in README (#910)
    • dd0bdde fix: Ensuring CLI & docs match up with each other (#904)
    • afa74ca [docs] Fix incorrect package exports recommendation (#903)
    • c04bd48 Version Packages (#900)
    • 2a0ca88 feat: :sparkles: Closes #497: preserve trailing newline in mangle.json (#882)
    • 26f382a fix: Corrects completion message to show the package's name, rather than the ...
    • d94bd97 Version Packages (#859)
    • 96b85da Resolve using "node" export condition for --target node (#887)
    • 2980336 feat: Expands generateTypes flag to support TS entries (#865)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    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)
    dependencies 
    opened by dependabot[bot] 0
  • Accordion is not working on next js

    Accordion is not working on next js

    • components: Accordion
    • reactstrap version 9.0.0
    • react version 17.0.2
    • bootstrap version 5.1.3
    • Next Js Version 12.0.3

    What is happening?

    The accordion is not working properly, it got some bug on the console

    What should be happening?

    The Accordion must be working because container, row, form group is fine

    Error message in console

    Warning: React does not recognize the `accordionId` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `accordionid` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    
    

    Photo

    error react strap s

    opened by raihanputraramd 0
  • NavBar with container set does not honor css modules

    NavBar with container set does not honor css modules

    • components: Navbar
    • reactstrap version #9.0.1
    • import method es
    • react version #17.0.2
    • bootstrap version #5.1.3

    What is happening?

    CSS modules are not honored for navbar containers

    What should be happening?

    CSS modules should be honored for navbar containers

    Steps to reproduce issue

    1. Use Util.setGlobalCssModule
    2. Use Navbar

    Code

    https://stackblitz.com/edit/reactstrap-uzaffi?file=Example.js notice the container class is "container-fluid" when it should be "container-fluid-modulex"

    opened by waterfoul 0
  • Carousel Component captions overflow

    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

    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.

    image

    image

    opened by ronaklalwaniii 0
Releases(v9.0.1)
Owner
reactstrap
React Bootstrap 4 components
reactstrap
A complete implementation of the Bootstrap components using SolidJS

Solid-Bootstrap You can check out the demo/test page here Overview Solid-Bootstrap is a port of React-Bootstrap for SolidJS. This is a complete implem

null 3 Nov 27, 2021
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDBootstrap 1.2k Nov 25, 2021
AppFolio component library for React & Bootstrap

react-gears react-gears is a React implementation of Appfolio UI components, using React, Bootstrap 4, and reactstrap.

AppFolio 9 Nov 13, 2021
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 22.3k Nov 26, 2021
ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components

ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components. It has utilities to set or get deep properties of nested data using paths.

Autodesk 18 Nov 10, 2021
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 262 Oct 30, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.5k Nov 24, 2021
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

?? Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Medly 53 Nov 30, 2021
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

Mat Sz 55 Nov 21, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 73.4k Dec 2, 2021
A simple React component that is resizable with a handle.

React-Resizable View the Demo A simple widget that can be resized via one or more handles. You can either use the <Resizable> element directly, or use

RGL 1.7k Nov 30, 2021
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Shaun Mak 4 Nov 8, 2021
React library to generate matrix style simple cards.

React library to generate matrix style simple cards.

null 12 Nov 18, 2021
Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript, auto-update URL hash and throttle support among others.

React UI ScrollSpy ✨ Installation npm install --save react-ui-scrollspy OR yarn add react-ui-scrollspy ?? Demo Try it your self here! ⚙️ Usage In your

Hussain Pettiwala 10 Nov 21, 2021
A React Component to increase/decrease font size of target elements via two simple buttons.

React Font Size Changer React Font Size Changer is a simple React component including two buttons to increae and decrease font size of a target text.

Mahmut Oztemur 5 May 7, 2020
A Simple Swipe Component For React

react-swipe-component Install yarn add mirsahib-react-swipe-component Or with npm: npm install mirsahib-react-swipe-component --save Usage Example imp

Mir Habib Ul Latif 1 Nov 29, 2021
A simple Tinder like swipe component for swiping cards

A simple Tinder like swipe component for swiping cards.

Andrew Vo-Nguyen 1 Nov 16, 2021
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

Rebass 7.6k Nov 28, 2021
🧱 A suite of React components .

English | 中文版 React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI fra

React Suite 6.3k Nov 24, 2021