Skip to content

Commit 2acccae

Browse files
lcheunglcilcheunglci
authored
docs: add bs5 basic examples (#239)
* bump bootstrap from 4.6.0 to 5.1.3 and react-bootstrap from 1.5.2 to 2.0.0 * Fix compiler error due to deprecated Jumbotron * Restore basic examples for bootstrap v4 and move changes to basic-v5
1 parent 0edd712 commit 2acccae

File tree

8 files changed

+11692
-0
lines changed

8 files changed

+11692
-0
lines changed

‎basic-v5/README.md‎

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

‎basic-v5/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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-scripts": "4.0.3"
11+
},
12+
"scripts": {
13+
"start": "react-scripts start",
14+
"build": "react-scripts build",
15+
"test": "react-scripts test",
16+
"eject": "react-scripts eject"
17+
},
18+
"eslintConfig": {
19+
"extends": "react-app"
20+
},
21+
"browserslist": {
22+
"production": [
23+
">0.2%",
24+
"not dead",
25+
"not op_mini all"
26+
],
27+
"development": [
28+
"last 1 chrome version",
29+
"last 1 firefox version",
30+
"last 1 safari version"
31+
]
32+
}
33+
}

‎basic-v5/public/index.html‎

Lines changed: 12 additions & 0 deletions
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-v5/src/App.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.header {
2+
text-align: center;
3+
}

‎basic-v5/src/App.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { useState } from 'react';
2+
3+
import Toast from 'react-bootstrap/Toast';
4+
import Container from 'react-bootstrap/Container';
5+
import Button from 'react-bootstrap/Button';
6+
7+
import './App.css';
8+
9+
const ExampleToast = ({ children }) => {
10+
const [show, toggleShow] = useState(true);
11+
12+
return (
13+
<>
14+
{!show && <Button onClick={() => toggleShow(true)}>Show Toast</Button>}
15+
<Toast show={show} onClose={() => toggleShow(false)}>
16+
<Toast.Header>
17+
<strong className="mr-auto">React-Bootstrap</strong>
18+
</Toast.Header>
19+
<Toast.Body>{children}</Toast.Body>
20+
</Toast>
21+
</>
22+
);
23+
};
24+
25+
const App = () => (
26+
<Container className="p-3">
27+
<Container className="p-5 mb-4 bg-light rounded-3">
28+
<h1 className="header">Welcome To React-Bootstrap</h1>
29+
<ExampleToast>
30+
We now have Toasts
31+
<span role="img" aria-label="tada">
32+
🎉
33+
</span>
34+
</ExampleToast>
35+
</Container>
36+
</Container>
37+
);
38+
39+
export default App;

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

Lines changed: 9 additions & 0 deletions
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-v5/src/index.js‎

Lines changed: 8 additions & 0 deletions
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'));

0 commit comments

Comments
 (0)