react-bootstrap / code-sandbox-examples

CodeSandbox example repository you can fork from, to bootstrap your React-Bootstrap projects.

React-Bootstrap

Bootstrap 5 components built with React.

Bootstrap compatibility

React-Bootstrap is compatible with various versions of Bootstrap. As such, you need to ensure you are using the correct combination of versions.

See the below table on which version of React-Bootstrap you should be using in your project.

Bootstrap Version	React-Bootstrap Version	Documentation
v5.x	2.x	Link
v4.x	1.x (not maintained)	Link
v3.x	0.33.x (not maintained)	Link

Migrating from previous versions

Bootstrap 4 to Bootstrap 5

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

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

• react-router-bootstrap – Integration with React Router
• Awesome React Bootstrap Components - Additional components like off-canvas navbar, switch and sliders.

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.

code-sandbox-examples's Issues

the basic and basic-sass-custom-theming examples don't work for react-bootstrap 2.0.2

Simply replace

    "bootstrap": "^4.6.0",
    "react-bootstrap": "^1.5.2",

with

    "bootstrap": "^5.1.3",
    "react-bootstrap": "^2.0.2",

in the package.json, and you'll get

ModuleNotFoundError
Could not find module in path: 'react-bootstrap/Jumbotron' relative to '/src/App.js'

on https://codesandbox.io/. I got the same message running locally with each node lts from dubnium (v10) thru gallium (v16)

In playing around locally, I received does not have a default export from import foo from 'react-bootstrap' and does not export Jumbotron from import { Jumbotron } from 'react-bootstrap'.

Parcel example is not working

I see the following error when opening the parcel examples.

Target container is not a DOM element.

Add Simple TypeScript Demo

As a developer, It would be really nice to have a simple TypeScript with React-Bootstrap demo that I can reference whenever starting a new project.

Possible components to include in the demo:

• Alerts
• Buttons
• Toasts
• Accordions
• ... And any other component that showcases the coolness of React-Bootstrap with TypeScript 😎

Your examples contain some bugs

Tested with following config:
Win 10 + Chrome and also Win10 + Firefox

Error 1: When running your Sass Example in code sandbox, I get following error when clicking on the "here" link:
SecurityError
Failed to execute 'replaceState' on 'History': A history state object with URL 'https://getbootstrap.com/docs/4.3/getting-started/theming/#importing' cannot be created in a document with origin 'https://ob4fg.csb.app' and URL 'https://ob4fg.csb.app/'.

Error 2: When running your Parcel Example (same in Parcel Typescript example) in code sandbox, I get the error below:
Error
Target container is not a DOM element.
▶ 1 stack frames were collapsed.
evaluate
/src/index.js:43:9

40 | );
41 |
42 | var mountNode = document.getElementById('root');

43 | ReactDOM.render(, mountNode);
| ^
44 |

View compiled

Add contributing guide

This should cover:

• How to contribute to react-bootstrap (could just reference this)
• How to create a self-contained repository that can run on CodeSandbox (should just come with everything it will need for deployment).

CodeSandbox examples dont work

the links to codeSandbox examples return an error

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Parcel Example

The parcel example doesn't work, at least not for me.

I get the following message:

Error
Target container is not a DOM element.

Parcel Example

Initialize repository with a common setup

A common setup for this project would be a create-react-app project, with React-Bootstrap and Bootstrap as additional dependencies.

React Router examples don't work

Hello,

I wanted to try react router example, unfortunately they don't work.

They seem to have a TypeError there which leads to an infinite fetchloop:
Retrying package fetch

codesandbox does not work -ModuleNotFoundError: Could not find module in path

https://codesandbox.io/s/github/0xproject/0x-codesandbox

ModuleNotFoundError: Could not find module in path: 'levelup/lib/leveldown' relative to '/node_modules/levelup/lib/levelup.js'

Basic Example cannot use fragments

The basic example doesn't work in the codesandbox when using fragments.

In order for it to work one needs to replace the fragments '<>' with 'div'.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency typescript to v5
• chore(deps): update dependency web-vitals to v3
• chore(deps): update react monorepo to v18 (major) (@types/react, @types/react-dom, react, react-dom)
• chore(deps): update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react, @testing-library/user-event)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@testing-library/jest-dom, @types/node, @types/react, @types/react-dom, bootstrap, prettier, react-bootstrap, react-router-dom, typescript)
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency @types/jest to v29
• chore(deps): update dependency node-sass to v9
• chore(deps): update dependency react-router-dom to v6
• chore(deps): update dependency react-scripts to v5
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency bootstrap to v5
• chore(deps): update dependency react-bootstrap to v2

Detected dependencies

github-actions

.github/workflows/test-examples.yml

• actions/checkout v2
• actions/setup-node v2
• actions/checkout v2

npm

basic-cdn-v5/package.json

• react ^17.0.2
• react-bootstrap ^2.6.0
• react-dom ^17.0.2
• react-scripts 4.0.3

basic-cdn/package.json

• react ^17.0.2
• react-bootstrap ^1.6.6
• react-dom ^17.0.2
• react-scripts 4.0.3

basic-react-router-v5/package.json

• bootstrap ^5.2.2
• react ^17.0.2
• react-bootstrap ^2.6.0
• react-dom ^17.0.2
• react-router-bootstrap ^0.26.2
• react-router-dom ^5.3.4
• react-scripts 4.0.3

basic-react-router/package.json

• bootstrap ^4.6.2
• react ^17.0.2
• react-bootstrap ^1.6.6
• react-dom ^17.0.2
• react-router-bootstrap ^0.26.2
• react-router-dom ^5.3.4
• react-scripts 4.0.3

basic-sass-custom-theming-v5/package.json

• bootstrap ^5.2.2
• node-sass ^5.0.0
• react ^17.0.2
• react-bootstrap ^2.6.0
• react-dom ^17.0.2
• react-scripts 4.0.3

basic-sass-custom-theming/package.json

• bootstrap ^4.6.2
• node-sass ^5.0.0
• react ^17.0.2
• react-bootstrap ^1.6.6
• react-dom ^17.0.2
• react-scripts 4.0.3

basic-ts-v5/package.json

• @types/jest 26.0.24
• @types/node 12.20.55
• @types/react 17.0.52
• @types/react-dom 17.0.18
• bootstrap ^5.2.2
• react ^17.0.2
• react-bootstrap ^2.6.0
• react-dom ^17.0.2
• react-scripts 4.0.3
• typescript 4.9.3

basic-ts/package.json

• @types/jest 26.0.24
• @types/node 12.20.55
• @types/react 17.0.52
• @types/react-dom 17.0.18
• bootstrap ^4.6.2
• react ^17.0.2
• react-bootstrap ^1.6.6
• react-dom ^17.0.2
• react-scripts 4.0.3
• typescript 4.9.3

basic-v5/package.json

• bootstrap ^5.2.2
• react ^17.0.2
• react-bootstrap ^2.6.0
• react-dom ^17.0.2
• react-scripts 4.0.3

basic/package.json

• bootstrap ^4.6.2
• react ^17.0.2
• react-bootstrap ^1.6.6
• react-dom ^17.0.2
• react-scripts 4.0.3

package.json

• prettier ^2.7.1

parcel-ts-v5/package.json

• bootstrap ^5.2.2
• react ^17.0.2
• react-bootstrap ^2.6.0
• react-dom ^17.0.2
• parcel-bundler ^1.12.5
• typescript ^4.9.3

parcel-ts/package.json

• bootstrap ^4.6.2
• react ^17.0.2
• react-bootstrap ^1.6.6
• react-dom ^17.0.2
• parcel-bundler ^1.12.5

parcel-v5/package.json

• bootstrap ^5.2.2
• react ^17.0.2
• react-bootstrap ^2.6.0
• react-dom ^17.0.2
• parcel-bundler ^1.12.5

parcel/package.json

• bootstrap ^4.6.2
• react ^17.0.2
• react-bootstrap ^1.6.6
• react-dom ^17.0.2
• parcel-bundler ^1.12.5

ts-react-router-v5/package.json

• @testing-library/jest-dom ^5.16.5
• @testing-library/react ^13.4.0
• @testing-library/user-event ^13.5.0
• @types/jest ^27.5.2
• @types/node ^16.18.3
• @types/react ^18.0.25
• @types/react-dom ^18.0.9
• @types/react-router-dom ^5.3.3
• bootstrap ^5.2.2
• react ^18.2.0
• react-bootstrap ^2.6.0
• react-dom ^18.2.0
• react-router-dom ^5.3.4
• react-scripts 5.0.1
• typescript ^4.9.3
• web-vitals ^2.1.4

ts-react-router-v6/package.json

• @testing-library/jest-dom ^5.16.5
• @testing-library/react ^13.4.0
• @testing-library/user-event ^13.5.0
• @types/jest ^27.5.2
• @types/node ^16.18.3
• @types/react ^18.0.25
• @types/react-dom ^18.0.9
• bootstrap ^5.2.2
• react ^18.2.0
• react-bootstrap ^2.6.0
• react-dom ^18.2.0
• react-router-dom ^6.4.3
• react-scripts 5.0.1
• typescript ^4.9.3
• web-vitals ^2.1.4

---

• Check this box to trigger a request for Renovate to run again on this repository