Skip to content

Commit f8a1a91

Browse files
lcheunglcilcheunglci
authoredNov 11, 2021
docs(basic) add bs5 examples for basic-ts, basic-react-router and basic-sass-custom-theming (#246)
* Add bootsrap v5 additional basic examples for ts, react-router and sass-custom-theming * Add bootstrap v5 example links in the README * Seperate out the v5 links from the v4 to make it more noticable in the README
1 parent a5c94aa commit f8a1a91

29 files changed

+35640
-1
lines changed
 

‎README.md

+11-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
The repository for React-Bootstrap's [CodeSandbox](https://codesandbox.io/) examples.
66

7-
## Examples
7+
## Examples v4
88

99
- [Basic Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic) - Just a simple create-react-app setup with React-Bootstrap components.
1010
- [Basic Example CDN](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-cdn) - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
@@ -13,3 +13,13 @@ The repository for React-Bootstrap's [CodeSandbox](https://codesandbox.io/) exam
1313
- [Basic Example with Sass and custom theming](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-sass-custom-theming) - Another simple create-react-app setup, this time by using Sass with custom theming
1414
- [Parcel Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel) - Just a simple Parcel setup with React-Bootstrap components.
1515
- [Parcel TypeScript Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-ts) - Just a simple Parcel setup with TypeScript with React-Bootstrap components.
16+
17+
## Examples v5
18+
19+
- [Basic Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-v5)- Just a simple create-react-app setup with React-Bootstrap components.
20+
- [Basic Example CDN](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-cdn-v5) - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
21+
- [Basic Example with React-Router-Bootstrap](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-react-router-v5) - Just a simple create-react-app setup with React-Router-Bootstrap.
22+
- [Basic Example with TypeScript](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-ts-v5) - Another simple create-react-app setup, this time by using TypeScript
23+
- [Basic Example with Sass and custom theming](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-sass-custom-theming-v5) - Another simple create-react-app setup, this time by using Sass with custom theming
24+
- [Parcel Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-v5) - Just a simple Parcel setup with React-Bootstrap components.
25+
- [Parcel TypeScript Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-ts-v5) - Just a simple Parcel setup with TypeScript with React-Bootstrap components.

‎basic-react-router-v5/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Basic Example with React-Router-Bootstrap
2+
3+
A simple [create-react-app](CRA-README.md) setup, showcasing how it works with React-Router-Bootstrap

‎basic-react-router-v5/package.json

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "code-sandbox-examples",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"bootstrap": "^5.1.3",
7+
"react": "^17.0.2",
8+
"react-bootstrap": "^2.0.0",
9+
"react-dom": "^17.0.2",
10+
"react-router-bootstrap": "^0.25.0",
11+
"react-router-dom": "^5.2.0",
12+
"react-scripts": "4.0.3"
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build",
17+
"test": "react-scripts test",
18+
"eject": "react-scripts eject"
19+
},
20+
"eslintConfig": {
21+
"extends": "react-app"
22+
},
23+
"browserslist": {
24+
"production": [
25+
">0.2%",
26+
"not dead",
27+
"not op_mini all"
28+
],
29+
"development": [
30+
"last 1 chrome version",
31+
"last 1 firefox version",
32+
"last 1 safari version"
33+
]
34+
}
35+
}

‎basic-react-router-v5/public/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>React-Bootstrap CodeSandbox Starter</title>
7+
</head>
8+
<body>
9+
<noscript>You need to enable JavaScript to run this app.</noscript>
10+
<div id="root"></div>
11+
</body>
12+
</html>

‎basic-react-router-v5/src/App.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.header {
2+
text-align: center;
3+
}
4+
5+
.custom-btn-toolbar {
6+
display: inline !important;
7+
}
8+
9+
.custom-btn-toolbar > .btn {
10+
margin-right: 1rem;
11+
}

‎basic-react-router-v5/src/App.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { MemoryRouter, Switch, Route } from 'react-router-dom';
3+
4+
import Container from 'react-bootstrap/Container';
5+
import Button from 'react-bootstrap/Button';
6+
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
7+
import { LinkContainer } from 'react-router-bootstrap';
8+
9+
import './App.css';
10+
11+
const Home = () => <span>Home</span>;
12+
13+
const About = () => <span>About</span>;
14+
15+
const Users = () => <span>Users</span>;
16+
17+
const App = () => (
18+
<MemoryRouter>
19+
<Container className="p-3">
20+
<Container className="p-5 mb-4 bg-light rounded-3">
21+
<h1 className="header">Welcome To React-Bootstrap</h1>
22+
<h2>
23+
Current Page is{' '}
24+
<Switch>
25+
<Route path="/about">
26+
<About />
27+
</Route>
28+
<Route path="/users">
29+
<Users />
30+
</Route>
31+
<Route path="/">
32+
<Home />
33+
</Route>
34+
</Switch>
35+
</h2>
36+
<h2>
37+
Navigate to{' '}
38+
<ButtonToolbar className="custom-btn-toolbar">
39+
<LinkContainer to="/">
40+
<Button>Home</Button>
41+
</LinkContainer>
42+
<LinkContainer to="/about">
43+
<Button>About</Button>
44+
</LinkContainer>
45+
<LinkContainer to="/users">
46+
<Button>Users</Button>
47+
</LinkContainer>
48+
</ButtonToolbar>
49+
</h2>
50+
</Container>
51+
</Container>
52+
</MemoryRouter>
53+
);
54+
55+
export default App;

‎basic-react-router-v5/src/App.test.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

‎basic-react-router-v5/src/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
// Importing the Bootstrap CSS
6+
import 'bootstrap/dist/css/bootstrap.min.css';
7+
8+
ReactDOM.render(<App />, document.getElementById('root'));

‎basic-react-router-v5/yarn.lock

+11,680
Large diffs are not rendered by default.

‎basic-sass-custom-theming-v5/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Basic Example using Sass with custom theming
2+
3+
A simple [create-react-app](CRA-README.md) setup, showcasing the use of a Sass with custom theming on React-Bootstrap components!

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

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "code-sandbox-examples",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"bootstrap": "^5.1.3",
7+
"node-sass": "^5.0.0",
8+
"react": "^17.0.2",
9+
"react-bootstrap": "^2.0.0",
10+
"react-dom": "^17.0.2",
11+
"react-scripts": "4.0.3"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test",
17+
"eject": "react-scripts eject"
18+
},
19+
"eslintConfig": {
20+
"extends": "react-app"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

‎basic-sass-custom-theming-v5/public/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>React-Bootstrap CodeSandbox Starter</title>
7+
</head>
8+
<body>
9+
<noscript>You need to enable JavaScript to run this app.</noscript>
10+
<div id="root"></div>
11+
</body>
12+
</html>

‎basic-sass-custom-theming-v5/src/App.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { useState } from 'react';
2+
3+
import Container from 'react-bootstrap/Container';
4+
import Button from 'react-bootstrap/Button';
5+
import Alert from 'react-bootstrap/Alert';
6+
7+
function AlertDismissibleExample() {
8+
const [show, setShow] = useState(false);
9+
10+
if (show) {
11+
return (
12+
<Alert variant="danger" onClose={() => setShow(false)} dismissible>
13+
<Alert.Heading>
14+
I am an alert of type <span className="dangerText">danger</span>! But
15+
my color is Teal!
16+
</Alert.Heading>
17+
<p>
18+
By the way the button you just clicked is an{' '}
19+
<span className="infoText">Info</span> button but is using the color
20+
Tomato. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
21+
Accusantium debitis deleniti distinctio impedit officia reprehenderit
22+
suscipit voluptatibus. Earum, nam necessitatibus!
23+
</p>
24+
</Alert>
25+
);
26+
}
27+
return (
28+
<Button variant="info" onClick={() => setShow(true)}>
29+
Show Custom Styled Alert
30+
</Button>
31+
);
32+
}
33+
34+
const App = () => (
35+
<Container className="p-3">
36+
<Container className="pb-1 p-5 mb-4 bg-light rounded-3">
37+
<h1 className="header">Welcome To React-Bootstrap</h1>
38+
<h2 className="header">Using Sass with custom theming</h2>
39+
<AlertDismissibleExample />
40+
<hr />
41+
<p>
42+
You can check further in information on the official Bootstrap docs{' '}
43+
<a
44+
href="https://getbootstrap.com/docs/4.3/getting-started/theming/#importing"
45+
target="_blank"
46+
rel="noopener noreferrer"
47+
>
48+
here
49+
</a>
50+
.
51+
</p>
52+
</Container>
53+
</Container>
54+
);
55+
56+
export default App;

‎basic-sass-custom-theming-v5/src/App.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import "custom";
2+
3+
.header {
4+
text-align: center;
5+
}
6+
7+
span {
8+
&.dangerText {
9+
color: #dc3545;
10+
}
11+
12+
&.infoText {
13+
color: #17a2b8;
14+
font-weight: bold;
15+
}
16+
}

‎basic-sass-custom-theming-v5/src/App.test.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

‎basic-sass-custom-theming-v5/src/custom.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* make the customizations */
2+
$theme-colors: (
3+
"info": tomato,
4+
"danger": teal
5+
);
6+
7+
/* import bootstrap to set changes */
8+
@import "../node_modules/bootstrap/scss/bootstrap";

‎basic-sass-custom-theming-v5/src/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
// Importing Sass with Bootstrap CSS
6+
import './App.scss';
7+
8+
ReactDOM.render(<App />, document.getElementById('root'));

‎basic-sass-custom-theming-v5/yarn.lock

+11,897
Large diffs are not rendered by default.

‎basic-ts-v5/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Basic TypeScript Example
2+
3+
A simple [create-react-app](CRA-README.md) setup, showcasing one of the latest React-Bootstrap components!

‎basic-ts-v5/package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "basic-ts",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@types/jest": "26.0.22",
7+
"@types/node": "12.20.10",
8+
"@types/react": "17.0.3",
9+
"@types/react-dom": "17.0.3",
10+
"bootstrap": "^5.1.3",
11+
"react": "^17.0.2",
12+
"react-bootstrap": "^2.0.0",
13+
"react-dom": "^17.0.2",
14+
"react-scripts": "4.0.3",
15+
"typescript": "4.2.4"
16+
},
17+
"scripts": {
18+
"start": "react-scripts start",
19+
"build": "react-scripts build",
20+
"test": "react-scripts test",
21+
"eject": "react-scripts eject"
22+
},
23+
"eslintConfig": {
24+
"extends": "react-app"
25+
},
26+
"browserslist": {
27+
"production": [
28+
">0.2%",
29+
"not dead",
30+
"not op_mini all"
31+
],
32+
"development": [
33+
"last 1 chrome version",
34+
"last 1 firefox version",
35+
"last 1 safari version"
36+
]
37+
}
38+
}

‎basic-ts-v5/public/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<title>React App</title>
9+
</head>
10+
<body>
11+
<noscript>You need to enable JavaScript to run this app.</noscript>
12+
<div id="root"></div>
13+
</body>
14+
</html>

‎basic-ts-v5/src/App.test.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

‎basic-ts-v5/src/App.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
3+
import Container from 'react-bootstrap/Container';
4+
5+
import ButtonsShowcase from './showcases/Buttons';
6+
import ToastsShowcase from './showcases/Toasts';
7+
8+
const App: React.FC = () => {
9+
return (
10+
<Container className="p-3">
11+
<Container className="p-5 mb-4 bg-light rounded-3">
12+
<h1 className="header">
13+
Welcome To React-Bootstrap TypeScript Example
14+
</h1>
15+
</Container>
16+
<h2>Buttons</h2>
17+
<ButtonsShowcase />
18+
<h2>Toasts</h2>
19+
<ToastsShowcase />
20+
</Container>
21+
);
22+
};
23+
24+
export default App;

‎basic-ts-v5/src/index.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
import 'bootstrap/dist/css/bootstrap.min.css';
6+
7+
ReactDOM.render(<App />, document.getElementById('root'));

‎basic-ts-v5/src/react-app-env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="react-scripts" />

‎basic-ts-v5/src/showcases/Buttons.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
3+
import Button from 'react-bootstrap/Button';
4+
5+
const ButtonsShowcase: React.FC = () => (
6+
<div className="p-1">
7+
<Button variant="primary" className="mr-1">
8+
Primary
9+
</Button>
10+
<Button variant="secondary" className="mr-1">
11+
Secondary
12+
</Button>
13+
<Button variant="success" className="mr-1">
14+
Success
15+
</Button>
16+
<Button variant="warning" className="mr-1">
17+
Warning
18+
</Button>
19+
<Button variant="danger" className="mr-1">
20+
Danger
21+
</Button>
22+
<Button variant="info" className="mr-1">
23+
Info
24+
</Button>
25+
<Button variant="light" className="mr-1">
26+
Light
27+
</Button>
28+
<Button variant="dark" className="mr-1">
29+
Dark
30+
</Button>
31+
<Button variant="link" className="mr-1">
32+
Link
33+
</Button>
34+
</div>
35+
);
36+
37+
export default ButtonsShowcase;

‎basic-ts-v5/src/showcases/Toasts.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { useState } from 'react';
2+
3+
import Toast from 'react-bootstrap/Toast';
4+
import Button from 'react-bootstrap/Button';
5+
6+
const ToastsShowcase: React.FC = () => {
7+
const [show, toggleShow] = useState(true);
8+
9+
return (
10+
<>
11+
{!show && <Button onClick={() => toggleShow(true)}>Show Toast</Button>}
12+
{/*
13+
// @ts-ignore */}
14+
<Toast show={show} onClose={() => toggleShow(false)}>
15+
<Toast.Header>
16+
<img src="holder.js/20x20?text=%20" className="rounded mr-2" alt="" />
17+
<strong className="mr-auto">Bootstrap</strong>
18+
<small>11 mins ago</small>
19+
</Toast.Header>
20+
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
21+
</Toast>
22+
</>
23+
);
24+
};
25+
26+
export default ToastsShowcase;

‎basic-ts-v5/tsconfig.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": [
5+
"dom",
6+
"dom.iterable",
7+
"esnext"
8+
],
9+
"allowJs": true,
10+
"skipLibCheck": true,
11+
"esModuleInterop": true,
12+
"allowSyntheticDefaultImports": true,
13+
"strict": true,
14+
"forceConsistentCasingInFileNames": true,
15+
"module": "esnext",
16+
"moduleResolution": "node",
17+
"resolveJsonModule": true,
18+
"isolatedModules": true,
19+
"noEmit": true,
20+
"jsx": "react-jsx",
21+
"noFallthroughCasesInSwitch": false
22+
},
23+
"include": [
24+
"src"
25+
]
26+
}

‎basic-ts-v5/yarn.lock

+11,588
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.