react-bootstrap / code-sandbox-examples Goto Github PK

View Code? Open in Web Editor NEW

308.0 14.0 160.0 3.96 MB

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

License: MIT License

HTML 19.40% CSS 5.45% JavaScript 39.64% TypeScript 33.82% SCSS 1.69%

hacktoberfest

code-sandbox-examples's Introduction

Code Sandbox Examples

The repository for React-Bootstrap's CodeSandbox examples.

Examples v4

Basic Example - Just a simple create-react-app setup with React-Bootstrap components.
Basic Example CDN - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
Basic Example with React-Router-Bootstrap - Just a simple create-react-app setup with React-Router-Bootstrap.
Basic Example with TypeScript - Another simple create-react-app setup, this time by using TypeScript
Basic Example with Sass and custom theming - Another simple create-react-app setup, this time by using Sass with custom theming
Parcel Example - Just a simple Parcel setup with React-Bootstrap components.
Parcel TypeScript Example - Just a simple Parcel setup with TypeScript with React-Bootstrap components.

Examples v5

Basic Example- Just a simple create-react-app setup with React-Bootstrap components.
Basic Example CDN - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
Basic Example with React-Router-Bootstrap - Just a simple create-react-app setup with React-Router-Bootstrap.
Basic Example with TypeScript - Another simple create-react-app setup, this time by using TypeScript
Basic Example with Sass and custom theming - Another simple create-react-app setup, this time by using Sass with custom theming
Parcel Example - Just a simple Parcel setup with React-Bootstrap components.
Parcel TypeScript Example - Just a simple Parcel setup with TypeScript with React-Bootstrap components.
React Router v5 Example - How to use a custom link component with React Router v5
React Router v6 Example - How to use a custom link component with React Router v6

code-sandbox-examples's People

Contributors

Stargazers

Watchers

Forkers

bhekanik magic-coder blummer92 madeleinegriggs luisfilipept pmatrixmedia steph4104 samuelsirkis bryanfang duoc-do malnati agpituk ramaraz dotcorps nicolopomini haivietduong shaiviente devalberg robwattct fritzlim jaynoel alamlam1982 shubhamdev-ai mecheka jae-mon doducchien smuger allisonjw ashwat07 johnhovanec deusofka mrgab0 rad10head7 isabella232 namadelphi thanx228 erslans execuvault msilvaj sanjeevk20 chhumheng briansu2004 nishadisb courthub74 ineba t4ms allen925 haude92 rsromanojr kipp0 plpatau d9account zmfreecodecamper nhlalaladylan ttkmw naufalnoori89 christophe-feuille k-ratos oliverliutao mikeybuckets nirinatanjona richarddeveloper john095 narchio alexto9 shiyuangu chanhong codehouze racmct jorgemguimaraes oronetworks fernandokc trozobador thejbte abadathaque headline-design lcheunglci pyaesabal clusteredemotion bagurudeen vietntvn igna-ctrl chawn kerbe victorplesko enricotimisela codemarie cooms13 paulweezydesignstudio ken604 valentinewabwire ruminatesoftware chamirusenarath96 jj77847 nedalmuhammed jasoncruz-dev habasa ctansey12600 backbayrider spdracr

code-sandbox-examples's Issues

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'

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 😎

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

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

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

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

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.

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.

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

Dependency Dashboard

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

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

chore(deps): update dependency web-vitals to v4
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)
🔐 Create all rate-limited PRs at once 🔐

Open

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

Ignored or Blocked

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

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

CodeSandbox examples dont work

the links to codeSandbox examples return an error