Bootstrap components built with React

Overview

React-Bootstrap

Bootstrap 4 components built with React.

GitHub Actions CI status Travis CI Build status npm Codecov Discord Netlify

Docs

See the documentation with live editable examples and API documentation.

To find the documentation for the latest Bootstrap 3 compatible release, go here.

Migrating from Bootstrap 3 to Bootstrap 4

If you would like to update React-Bootstrap within an existing project to use Bootstrap 4, please read our docs for migrating to React-Bootstrap V1.

Related modules

Local setup

Yarn is our package manager of choice here. Check out setup instructions here if you don't have it installed already. After that you can run yarn run bootstrap to install all the needed dependencies.

From there you can:

  • Run the tests once with yarn test (Or run them in watch mode with yarn run tdd).
  • Start a local copy of the docs site with yarn start
  • Or build a local copy of the library with yarn run build

CodeSandbox Examples

Click here to explore some React-Bootstrap CodeSandbox examples.

Click here to automatically open CodeSandbox with the React-Bootstrap CodeSandbox Examples GitHub Repository as a workspace.

Contributions

Yes please! See the contributing guidelines for details.

Issues
  • Fix arbitrary prop passthrough to DOM nodes.

    Fix arbitrary prop passthrough to DOM nodes.

    @jimfb and @gaearon were kinda enough to reach out and warn us that RB will have a lot of warnings in React v15.2.0, of which, a release is imminent.

    The problem is that in preparation for removing the DOM attribute whitelist, React has started to warn when props that are not DOM attributes are passed through to DOM nodes. This (AFAIK) to help for folks to clean up code before those attributes are suddenly applied to the DOM nodes in a later version when the whitelist is removed.

    @react-bootstrap/collaborators If anyone has time to start talking this in part (or whole) this might be less of a chore if a bunch of folks work on it. We also need to decide what the best way to ensure that we do not break existing API's by being too restrictive in what we pass through.

    Concerns

    I'm not sure if any of these cases exist (here) but I am concerned about API's that require carte-blanche passthrough of props to a child that may or may not a DOM node. Presumably in those cases we can either defer to the User to use a component, or make sure to remove "own" props before passing through.

    This also effectively means that API's like dropdown which allow for using the throwaway bsRole prop to indicate type to the parent no longer work for DOM nodes. That sort of sucks, that was a really great side-effect feature of that API.

    question help wanted 
    opened by jquense 84
  • Bootstrap 4 Roadmap

    Bootstrap 4 Roadmap

    opened by chrishoage 73
  • [added] RadioButton and RadioGroup

    [added] RadioButton and RadioGroup

    Part of #342.

    The RadioGroup might also resolve #365 by keeping track of the selected item.

    opened by aabenoja 41
  • Modal has issues when invoked in a class: Cannot read property 'getDialogElement' of null

    Modal has issues when invoked in a class: Cannot read property 'getDialogElement' of null

    Hey all,

    Im trying to use the modal in a react class and I'm running into Cannot read property 'getDialogElement' of null and Cannot read property 'remove' of null.

    here is my code snippet, lifted directly from your site, but adopted for a component:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import {Modal} from 'react-bootstrap';
    
    export default class ModalDemo extends React.Component {
    
      constructor(props) {
        super(props);
        this.state = {
          showModal: false
        }
        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
      }
    
      close() {
        this.setState({ showModal: false });
      }
    
      open() {
        this.setState({ showModal: true });
      }
      render() {
        return (
            <div>
              <p>Click to get the full Modal experience!</p>
    
              <Button
                bsStyle="primary"
                bsSize="large"
                onClick={this.open}
              >
                Launch demo modal
            </Button>
    
              <Modal show={this.state.showModal} onHide={this.close}>
                <Modal.Header closeButton>
                  <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                  <h4>Text in a modal</h4>
                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                </Modal.Body>
                <Modal.Footer>
                  <Button onClick={this.close}>Close</Button>
                </Modal.Footer>
              </Modal>
            </div>
        );
      }
    }
    

    When this code executes however I get the first error on show and the transition animation does not play and its this line var dialogNode = this._modal.getDialogElement(); in Modal.js that triggers it, because _modal is null. Breakpointing through the code, the issue seems to be happening because when the render method is called. When the page first loads, the render method is called, and this function ref={c => { this._modal = c; }} is invoked with c being the Modal object. However when the state changes (in this case pushing the button, c resolved to null and overrides the initial prop. Any functions that have to call Modal properties on _modal now fail.

    It's very possible I missed something here and there is an issue with my code, but I can't seem to get this working properly within my context.

    opened by turboki 40
  • react-bootstrap's Modal does not work with React 16

    react-bootstrap's Modal does not work with React 16

    Look like the recent react's update has cause react-bootstrap modal to stop working. Here are the errors:

    image

    image

    This issue is also discussed on react-overlays

    https://github.com/react-bootstrap/react-overlays/issues/188

    opened by ducdigital 40
  • Impose airbnb linting with exceptions

    Impose airbnb linting with exceptions

    just compare with https://github.com/react-bootstrap/react-bootstrap/pull/1176 11 vs 22 exclusions :smile:

    It seems semistandard is way less stricter and suits more for R-B.

    opened by AlexKVal 40
  • Invariant violation when adding Navbar

    Invariant violation when adding Navbar

    I'm getting this error message

    Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

    when adding the following code:

    <Navbar>
      <Nav navbar right>
        <NavItem onClick={this.props.handleCSV} href="#">Import CSV</NavItem>
      </Nav>
    </Navbar>
    
    opened by gerherz 38
  • React 0.12 support

    React 0.12 support

    Provide React 0.12 support in all react-bootstrap components.

    BREAKING CHANGES: It's no longer possible to use key indiscriminately within React components, so I had to make the following changes to component props:

    Panel: key -> eventKey MenuItem: key -> eventKey NavItem: key -> eventKey TabPane: key -> eventKey ListGroupItem: key -> eventKey

    Comments or help finishing this off is welcome.

    opened by trentgrover-wf 38
  • Change Panel and ListGroupItem API

    Change Panel and ListGroupItem API

    Per the documentation: http://react-bootstrap.github.io/components.html#panels, when using a panel, unless you specifically supply the header prop some heading tags, it will print the title area as normal text within the panel-heading div. If you wrap that Panel in an Accordion, supplying just a string to Panel's header prop will suddenly output a title wrapped in an H4.

    I think this is inconsistent behavior. Is there any reason why it specifically creates an H4 tag in this instance? I would like to have an accordion panel where the heading text is just normal text and not an H4.

    Panel.js:187 looks like it could be the culprit.

    To reproduce create:

       Panel header='test title' 
    

    Note that the title is rendered as normal text. Then try:

       Accordion
            Panel header='test title'
       /Accordion
    

    The title now automatically becomes an H4

    enhancement help wanted 
    opened by kylehood 37
  • Overlay Overhaul

    Overlay Overhaul

    Moving the conversation from #811 into a PR b/c I think it may help provide some visibility into the code changes I am thinking about here. be warned this is a really long note

    We have two major API's that are Changing: Modals, Overlays (tooltips/popovers)

    Consolidations

    • deprecations
      • OverlayMixin replaced by Portal component
    • additions
      • Portal component, just renders its children into a container fixes #404

    Modals and Overlays share some common functions underneath, and Users have come to use our OverlayMixin, the new Portal Component offers the same functionality in a way that works for both createClass or plain class consumers

      <Portal container={document.body}>
        <div>rendered into the body!</div>
      </Portal>
    

    Modals

    • deprecations
      • ModalTrigger - fixes #397, fixes #616
      • title and closeButton props on Modal (moved to ModalHeader)
      • onRequestHide prop renamed to onHide (more idiomatic with our callbacks)
    • additions - partly addresses #748
      • ModalHeader
      • ModalTitle
      • ModalBody
      • ModalFooter

    Api

    new components are exported on the Modal component Automatically for ease of use, or can be imported from lib if the user wants. Body, Footer, and Title are just convenient wrappers of <div className='modal-part'/> and Modal Header will auto wire the closeButton click to the parent onHide.

    <Modal container={mountNode} onHide={function(){}} aria-labelledby='title'>
        <Modal.Header closeButton>
          <Modal.Title id='title'>Modal title</Modal.Title>
        </Modal.Header>
    
        <Modal.Body>
            One fine body...
        </Modal.Body>
        <Modal.Footer>
            <Button bsStyle='primary'>Save changes</Button>
         </Modal.Footer>
    </Modal>
    

    I think its safe to remove (deprecated for now) ModalTrigger, it is a slight convenience over handling the state yourself ,but since you don't generally have 10s of modals in a component at once (as with tooltips potentially) I say we prefer the React philosophy of explicitness over abstraction here.

    By explicitly specifying the Header, users get more customization options and better potential accessibility (aria-labelledby above). We can gracefully deprecate the current api, by checking if a user provides a title prop in the Modal and auto adding the new Header Component to the children, so no breaking changes.

    Overlays

    The tooltips and popovers (from here on out "Overlays") present some interesting issues Modals do not.

    • You may have many Overlays on a page, and managing that manually in state is very verbose
    • Overlays are targeted to a specific element, as well as potentially being rendered into a new subtree

    Goals for the API

    • maintain a similar level of ease-of-use that the OverlayTrigger offers, for wiring overlays to triggers and rendering custom overlays (non tooltips or Popovers)
    • Allow better control over the provided Overlays so they can be tweaked for custom behavior, such as: #850, #816, #802, #611, #436

    My Proposed path here is to ultmately end up with a declarative Overlay Component that can be completely controlled in terms of positioning, and display (show/hide). I think that looks something like the Modals above

    <Button
      bsStyle='default'
      ref='btn'
      onClick={e => this.setState({ show: !this.state.show })}
    >
      Holy guacamole!
    </Button>
    <Popover
      show={this.state.show}
      target={()=> this.refs.btn}
      placement='bottom'
      container={mountNode}
      containerPadding={20}
      title='Popover bottom'
    >
      <strong>Holy guacamole!</strong> Check this info.
    </Popover>
    

    To acheive this though, both the render-to-container (show/hide), and positioning logic need to be removed from the OverlayTrigger Component and moved downstream. me and @taion have had a few long conversations on gitter about how far down to move it.

    Before that though I have abstracted out that logic into seperate Components, we've already seen Portal as used by Modal, and the to-be-better-named: Position Component, for calculating an offset based on the target and container.

    that leaves us with the following as the implementation of an Overlay:

    class Popover extends React.Component {
      render(){
        let {
            container
          , containerPadding
          , target
          , placement
          , ...props } = this.props;
    
        return (
          <Portal show={props.show} container={container}>
            <Position {...{ container, containerPadding, target, placement }}>
              <PopoverMarkup>
                { this.props.children }
              </PopoverMarkup>
            </Position>
          </Portal>
        );
      }
    }
    

    Which feels like a lot of boilerplate for making custom Overlays. To help with that I am bundling both of these components up into an Overlay Component which makes it a bit better...

    class Popover extends React.Component {
      render() {
        return (
          <Overlay {...this.props}>
            <PopoverMarkup {...this.props}>
              { this.props.children }
            </PopoverMarkup>
          </Overlay>
        );
      }
    }
    

    This feels a bit verbose to me but probably reasonable for Custom Overlays. It also means that the Popover and Tooltip Components are no longer "dumb" static markup components, which enables the declarative api way up page. I think that this is worth it, the Alternative is that we needto abandon the declartive api and put the logic back in OverlayTrigger or write this when we want the declarative syntax:

    <Button bsStyle='default' ref='btn' onClick={e => this.setState({ show: !this.state.show })}>
      Holy guacamole!
    </Button>
    <Overlay
      show={this.state.show}
      target={()=> this.refs.btn}
      placement='bottom'
      container={mountNode}
      containerPadding={20}
    >
      <Popover title='Popover bottom'>
        <strong>Holy guacamole!</strong> Check this info.
      </Popover>
    </Overlay>
    

    I find that less optimal than just having the PopOver component but it does have an advantage that @taion thinks is worth it. If we do it this way OverlayTrigger can jsut wrap its overlay prop in an Overlay Component, and then you can specify static markup to it, without it needing to be a special kind of Component.

    Simplier Custom Overlays
      class MyOverlay {
        render(){
          let { positionLeft: left, positionTop: top } = this.props
          return <div style={{left, top}}>my overlay</div>
        }
      }
    
     <OverlayTrigger overlay={<MyOverlay/>}/>
    

    which is less verbose than:

    Simplier Declarative Overlays
      class MyOverlayMarkup {
        render(){
          let { positionLeft: left, positionTop: top } = this.props
          return <div style={{left, top}}>my overlay</div>
        }
      }
    
      // we could alternatively make this a function instead of a wrapper component like:
      // createOverlay(MyOverlayMarkup) or a decorator like @Overlay
      class MyOverlay {
        render(){
          return (
            <Overlay {...this.props}>
              <MyOverlayMarkup {...this.props}/>
            </Overlay>
          );
        }
      }
    
     <OverlayTrigger overlay={<MyOverlay/>}/>
    

    GET TO THE POINT ALREADY THIS PR IS SOOOOOOOO LONG

    Which Overlay Api do we go with?

    • Simplier Custom Overlays
    • Simplier declarative Popover/Tooltips
    • Something completely different
    • Just revert it all
    opened by jquense 37
  • chore(deps): bump log4js from 6.3.0 to 6.4.0

    chore(deps): bump log4js from 6.3.0 to 6.4.0

    Bumps log4js from 6.3.0 to 6.4.0.

    Changelog

    Sourced from log4js's changelog.

    6.4.0

    ... (truncated)

    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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • ToggleButton > Label Render Violates AXE Rules

    ToggleButton > Label Render Violates AXE Rules

    Prerequisites

    Describe the bug

    Upgraded to react-bootstrap 2.1.1 from 2.0.0-beta.4.

    Running our AXE react component tests, we are receiving the following issue when testing a component using the ToggleButton:

    Fix any of the following:
      ARIA role button is not allowed for given element
    
    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/4.2/aria-allowed-role?application=axeAPI
    
    Expected the HTML found at $('label[for="auth_requireAction"]') to have no violations:
    
    <label role="button" for="auth_requireAction" tabindex="0" class="btn btn-outline-primary">Require Action</label>
    
    Received:
    
    "ARIA role should be appropriate for the element (aria-allowed-role)"
    

    I'm not sure when the rendering of a ToggleButton has changed?

    Expected behavior

    Unit tests to pass successfully.

    It seems that AXE is failing the test due to the role of button being assigned to the label.

    To Reproduce

    Create a component that utilises ToggleButton Run either Axe in Chrome dev tools or create a react test utilising the jest-axe npm package

    Reproducible Example

    Running our AXE react component tests, we are receiving the following issue when testing a component using the ToggleButton:

    Fix any of the following:
      ARIA role button is not allowed for given element
    
    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/4.2/aria-allowed-role?application=axeAPI
    
    Expected the HTML found at $('label[for="auth_requireAction"]') to have no violations:
    
    <label role="button" for="auth_requireAction" tabindex="0" class="btn btn-outline-primary">Require Action</label>
    
    Received:
    
    "ARIA role should be appropriate for the element (aria-allowed-role)"
    

    Screenshots

    No response

    What operating system(s) are you seeing the problem on?

    Windows

    What browser(s) are you seeing the problem on?

    Chrome, Safari, Firefox, Microsoft Edge, Opera

    What version of React-Bootstrap are you using?

    2.1.1

    What version of Bootstrap are you using?

    5.0.2

    Additional context

    No response

    bug 
    opened by markaustinws 0
  • fix(TabPane): add role=

    fix(TabPane): add role="tabpanel"

    Adds role attribute on TabPane.

    I added a test inside <Tabs> suite since it is quite simple.

    Let me know if I need to change / integrate something.

    Thanks

    opened by marcalexiei 0
  • Inflexible Typing on DropdownToggle

    Inflexible Typing on DropdownToggle

    Prerequisites

    Describe the bug

    The Dropdown props are perhaps too inflexible.

    I would like to replicate an Autocomplete-like component (like Mui), and tried to follow the "Custom Dropdown Components" as a starting point.

    I do this by substituting the CustomToggle with a FormControl component, making sure the props and ref are correctly forwarded. However, when using the Dropdown.Toggle and slotting CustomToggle into the as prop, the typing of onChange does not reflect this. The component renders fine and looks great, exactly how I wanted it. However I cannot access the inner input.

    The typing of Dropdown assumes the ref will always be forwarded to a button down the line. Looking at the component definition here, the typing confirms this.

    I am not good enough with Typescript to create a PR myself. Indeed, this may be an intentional decision to restrict the Dropdown functionality. I do not know. Any help or insight is appreciated, and I am thankful for all the hard work this team puts into this library.

    Expected behavior

    I expected the prop types of Dropdown.Toggle to be in accord with the prop types I passed in to the function via the as prop.

    To Reproduce

    No response

    Reproducible Example

    import React from 'react';
    import { Form, FormControlProps, Dropdown } from 'react-bootstrap';
    
    const CustomToggle = React.forwardRef<HTMLInputElement, FormControlProps>(
        (props, ref) => (
            <Form.Control type="text" ref={ref} onChange={(e) => { e.preventDefault(); if (props.onChange) { props.onChange(e); } }}/>
        )
    );
    
    type AutocompleteSimpleOption = string
    
    type AutocompleteProps = {
        options: Array<AutocompleteSimpleOption>
    }
    
    const Autocomplete = (props: AutocompleteProps) => {
        return <Dropdown show>
            {/* Error in the below line, "value" key not valid on e.target because e is a button event*/}
            <Dropdown.Toggle as={CustomToggle} onChange={e => console.log(e.target.value)}/>
            <Dropdown.Menu>
                {
                    props.options.map(
                        elem => <Dropdown.Item>{elem}</Dropdown.Item>
                    )
                }
            </Dropdown.Menu>
        </Dropdown>;
    };
    
    export default Autocomplete;
    

    Screenshots

    No response

    What operating system(s) are you seeing the problem on?

    Windows

    What browser(s) are you seeing the problem on?

    Chrome

    What version of React-Bootstrap are you using?

    2.1.0

    What version of Bootstrap are you using?

    5.1.3

    Additional context

    No response

    bug types 
    opened by ouifi 0
  • test: move AccordionButton to RTL.

    test: move AccordionButton to RTL.

    part of #6156

    opened by VibhorJaiswal 0
  • TypeScript: Modal component accepts arbitrary props

    TypeScript: Modal component accepts arbitrary props

    Prerequisites

    Describe the bug

    This line makes it so you can pass non-existent props to the Modal component and TypeScript will still compile.

    Expected behavior

    The following code should produce a TypeScript error:

    const el = <Modal foobar="123" baz={77} bux={{ grapeJuice: false }} />
    

    To Reproduce

    See CodeSandbox.

    Reproducible Example

    https://codesandbox.io/s/react-bootstrap-modal-types-kgge3

    Screenshots

    No response

    What operating system(s) are you seeing the problem on?

    Windows

    What browser(s) are you seeing the problem on?

    Chrome

    What version of React-Bootstrap are you using?

    2.1.0

    What version of Bootstrap are you using?

    N/A

    Additional context

    No response

    types 
    opened by srmagura 4
  • timeout prop not work then 300

    timeout prop not work then 300

    Prerequisites

    Describe the bug

    Are timeout accepts last value 300 ?

    I need 800 value for timeout value

    Expected behavior

    No response

    To Reproduce

    No response

    Reproducible Example

    https://codesandbox.io/s/stoic-mclaren-dm2zf?file=/src/App.js

    Screenshots

    https://iili.io/YwYeJ2.png

    What operating system(s) are you seeing the problem on?

    Windows

    What browser(s) are you seeing the problem on?

    Chrome

    What version of React-Bootstrap are you using?

    2.0.3

    What version of Bootstrap are you using?

    5.1.3

    Additional context

    No response

    opened by adminwp 1
  • Pass on click event to onHide for more options

    Pass on click event to onHide for more options

    onHide is currently not passed the event. This means you cannot e.g. call event.stopPropagation() on the click event, preventing the event from bubbling up and calling actions on containers. Simply passing through the event seems safe and simple and gives more options (you could still ignore the event).

    opened by bthorben 0
  • Checked attribute not being applied on toggle buttons wrapped inside div

    Checked attribute not being applied on toggle buttons wrapped inside div

    Hi,

    I have a button group with many toggle buttons, some of them is hidden inside a collapse div. Those who are wrapped by the div doesn't get the checked attribute applied. However the value gets saved. Can I apply the checked attribute manual or is it a bug?

    The buttons inside <ShowMore> will get wrapped by the div.

                {(field.options.length <= 5 ? field.options.map((option) => (
                    <ToggleButton key={option.value} className="block" id={option.value} value={option.value} onChange={handleChange}>{option.option}</ToggleButton>
                )) : field.options.map((option, i) => (
                    (i === field.options.length -1) ? [<span hidden>{hiddenButtons.push(<ToggleButton key={option.value} className="block" id={option.value} type="radio" value={option.value} onChange={handleChange} name={field.input.name}>{option.option}</ToggleButton>)}</span>, <ShowMore>{hiddenButtons}</ShowMore>]
                    : (i <= 5) ? <ToggleButton key={option.value} className="block" id={option.value} value={option.value} onChange={handleChange}>{option.option}</ToggleButton>
                    : <span hidden>{hiddenButtons.push(<ToggleButton key={option.value} className="block" id={option.value} type="radio" value={option.value} onChange={handleChange} name={field.input.name}>{option.option}</ToggleButton>)}</span>
                )))}
            </ToggleButtonGroup>```
    needs more info 
    opened by jakobjyberg 2
  • Modal with animation on stays hidden in certain cases

    Modal with animation on stays hidden in certain cases

    Prerequisites

    Describe the bug

    We are using react-bootstrap in an application together with react-router-dom, where content of the page is generated based on a dynamically loaded JSON file.

    The issue is, that whenever a modal should be opened with animation on, meanwhile some content is being downloaded and rendered for an other component, only the backdrop appears and the dialog not. By inspecting the error cases, the only difference on the resulting DOM is that style="display: block;" won't be attached to the modal's div in these cases.

    In our application the issue only happens the first time a page is visited, next time the browser is using the cached route, and the modal also behaves as it should. Turning off the animation results in the correct behaviour, so it sounds like due to other processes somehow the end of the animation is not detected/triggered?

    Expected behavior

    The modal should appear, with the backdrop behind. Instead, only the backdrop is visible (and also functional). In the DOM, the style="display: block;" should be added at the end of the animation, but is missing.

    To Reproduce

    No response

    Reproducible Example

    https://github.com/coneno/case-web-app-core/commit/56c926895446d40af599d9d78110744d0e171725

    Using yarn storybook command a local preview starts. In the Participant app/Example1 using the navigation menu, the issue happens every time when a page opened first.

    Screenshots

    No response

    What operating system(s) are you seeing the problem on?

    macOS

    What browser(s) are you seeing the problem on?

    Chrome, Safari

    What version of React-Bootstrap are you using?

    2.1.0

    What version of Bootstrap are you using?

    5.1.3

    Additional context

    No response

    bug 
    opened by phev8 10
Releases(v2.1.1)
Owner
react-bootstrap
The popular front-end framework, rebuilt with React
react-bootstrap
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 28 Jan 8, 2022
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDBootstrap 1.2k Jan 14, 2022
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 Dec 28, 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 Jan 20, 2022
VechaiUI – React components with built-in dark mode using Tailwind CSS

Collection of accessible React UI components with the built-in dark theme using Tailwind CSS. Pre-designed headless ui and radix-ui.

null 738 Jan 17, 2022
Opinionated React UI library, built with styled-components and TypeScript.

Opinionated React UI library, built with styled-components and TypeScript.

Lapidist 0 Jan 10, 2022
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 263 Dec 17, 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.7k Jan 14, 2022
🧩 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 63 Jan 10, 2022
Nextjs-components - A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation TBD Todo's Unit test coverage Unit tests

null 22 Jan 15, 2022
Rheostat is a www, mobile, and accessible slider component built with React

Rheostat A mobile, tablet, desktop, and accessible slider for the web. Install npm install rheostat Initialize As of v3.0.0, the rheostat project reli

Airbnb 1.6k Jan 18, 2022
An accessible accordion built using React.

An accessible accordion built using React.

Peter Aiello 8 Nov 24, 2021
Component Library for Korol Social Network Built With React

Component Library for Korol Social Network View Demo · Report Bug · View Package ??️ Built With React TypeScript StoryBook Styled Components ?? Gettin

Volodya-Korol 1 Nov 5, 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 23.3k Jan 16, 2022
🧱 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.4k Jan 14, 2022
React components for Bulma framework

React-bulma-components React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js) V4 Pool Please Check h

John 1.1k Jan 12, 2022
React.js components for Modern CSS framework based on Flexbox

React-Bulma React.js components for Modern CSS framework based on Flexbox Styleguide: https://kulakowka.github.io/react-bulma/ Official Repo: https://

Anton Kulakov 462 Jan 7, 2022
Super Saiyan React components, son of awesome Bulma, implemented in TypeScript

Trunx Super Saiyan React components, son of awesome Bulma, implemented in TypeScript Status Almost all Bulma features are available and documented, fe

Gianluca Casati 59 Dec 1, 2021
React UI Components for macOS High Sierra and Windows 10

React UI Components for macOS High Sierra and Windows 10. npm install react-desktop --save Help wanted! I am looking for developers to help me develop

Gabriel Bull 9.3k Jan 14, 2022