Skip to content

Commit b51210b

Browse files
pettiboypettiboy
committed
✨ NEW: Added demo2, updated demo website
1 parent e70e343 commit b51210b

File tree

12 files changed

+279
-30
lines changed

12 files changed

+279
-30
lines changed

‎demo-app/package-lock.json‎

Lines changed: 58 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo-app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@types/react-dom": "^17.0.10",
1414
"react": "^17.0.2",
1515
"react-dom": "^17.0.2",
16+
"react-router-dom": "^6.0.2",
1617
"react-scripts": "4.0.3",
1718
"react-ui-scrollspy": "file:react-ui-scrollspy-2.0.0.tgz",
1819
"typescript": "^4.4.4",

‎demo-app/public/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
1717
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
19+
<!-- Bootstrap CSS -->
20+
<link
21+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
22+
rel="stylesheet"
23+
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
24+
crossorigin="anonymous"
25+
/>
26+
1827
<!--
1928
Notice the use of %PUBLIC_URL% in the tags above.
2029
It will be replaced with the URL of the `public` folder during the build.
@@ -40,4 +49,11 @@
4049
To create a production bundle, use `npm run build` or `yarn build`.
4150
-->
4251
</body>
52+
53+
<!-- Bootstrap JS -->
54+
<script
55+
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
56+
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
57+
crossorigin="anonymous"
58+
></script>
4359
</html>

‎demo-app/src/App.tsx‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,20 @@
1-
import Center from "./components/Center/Center";
2-
import Navigation from "./components/Navigation/Navigation";
3-
// import ScrollSpy from "react-ui-scrollspy";
4-
import ScrollSpy from "./components/src/index";
1+
import { Routes, Route, BrowserRouter } from "react-router-dom";
52
import Buttons from "./components/Buttons/Buttons";
3+
import DummyNav from "./components/NavBar/NavBar";
4+
import Demo1 from "./pages/Demo1";
5+
import Demo2 from "./pages/Demo2";
66

77
function App() {
88
return (
9-
<div>
10-
<Navigation />
11-
12-
<ScrollSpy scrollThrottle={100}>
13-
<Center id="orange" backgroundColor={"orange"}>
14-
<h1>Orange</h1>
15-
</Center>
16-
<Center id="brown" backgroundColor={"brown"}>
17-
<h1>Brown</h1>
18-
</Center>
19-
<Center id="blue" backgroundColor={"blue"}>
20-
<h1>Blue</h1>
21-
</Center>
22-
<Center id="green" backgroundColor={"green"}>
23-
<h1>Green</h1>
24-
</Center>
25-
</ScrollSpy>
9+
<BrowserRouter>
10+
<DummyNav />
2611

12+
<Routes>
13+
<Route path="/" element={<Demo1 />} />
14+
<Route path="demo-2" element={<Demo2 />} />
15+
</Routes>
2716
<Buttons />
28-
</div>
17+
</BrowserRouter>
2918
);
3019
}
3120

‎demo-app/src/components/Center/Center.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,21 @@ import React, { CSSProperties } from "react";
33
interface CenterProps {
44
children: React.ReactNode;
55
backgroundColor?: string;
6+
height?: string;
67
id: string;
78
}
89

910
const Center = ({
1011
children,
1112
backgroundColor = "rgb(255,255,255)",
1213
id,
14+
height = "100vh",
1315
}: CenterProps) => {
1416
const styles: CSSProperties = {
1517
display: "flex",
1618
justifyContent: "center",
1719
alignItems: "center",
18-
height: "100vh",
20+
height: height,
1921
backgroundColor: backgroundColor,
2022
};
2123

‎demo-app/src/components/Navigation/Navigation.tsx‎ renamed to ‎demo-app/src/components/Demo1/Navigation.tsx‎

File renamed without changes.

‎demo-app/src/components/NavBar/NavBar.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
3+
interface Props {}
4+
5+
const DummyNav = (props: Props) => {
6+
return (
7+
<nav className="navbar navbar-expand-lg navbar-dark fixed-top pt-3 position-sticky bg-dark">
8+
<div className="container-fluid">
9+
<a href="/" className="navbar-brand">
10+
React ScrollSpy
11+
</a>
12+
13+
{/* <!-- toggle button --> */}
14+
<button
15+
className="navbar-toggler"
16+
type="button"
17+
data-bs-toggle="collapse"
18+
data-bs-target="#navmenu"
19+
>
20+
<span className="navbar-toggler-icon"></span>
21+
</button>
22+
23+
{/* <!-- links --> */}
24+
<div className="collapse navbar-collapse" id="navmenu">
25+
<ul className="navbar-nav ms-auto">
26+
<li className="nav-item px-2">
27+
<a href="/" className="text-decoration-none text-white">
28+
Demo 1
29+
</a>
30+
</li>
31+
<li className="nav-item px-2">
32+
<a href="/demo-2" className="text-decoration-none text-white">
33+
Demo 2
34+
</a>
35+
</li>
36+
</ul>
37+
</div>
38+
</div>
39+
</nav>
40+
);
41+
};
42+
43+
export default DummyNav;

‎demo-app/src/index.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ code {
1818
transition: all 0.5s;
1919
}
2020
.ss-item {
21+
color: black;
2122
padding: 30px;
2223
margin: 10px;
2324
}
@@ -42,7 +43,6 @@ code {
4243
}
4344

4445
a {
45-
color: black;
4646
text-decoration: none;
4747
}
4848
/* media query for screens less than 500px */
@@ -56,3 +56,16 @@ a {
5656
padding: 15px 25px;
5757
}
5858
}
59+
60+
/* demo 2 */
61+
.ss-item-demo-2 {
62+
font-size: larger;
63+
padding: 10px;
64+
margin: 10px;
65+
color: white;
66+
}
67+
.ss-active-demo-2 {
68+
border-radius: 10px;
69+
transition: all 0.5s;
70+
background: blue;
71+
}

‎demo-app/src/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import reportWebVitals from './reportWebVitals';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./index.css";
4+
import App from "./App";
5+
import reportWebVitals from "./reportWebVitals";
66

77
ReactDOM.render(
88
<React.StrictMode>
99
<App />
1010
</React.StrictMode>,
11-
document.getElementById('root')
11+
document.getElementById("root")
1212
);
1313

1414
// If you want to start measuring performance in your app, pass a function

‎demo-app/src/pages/Demo1.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Center from "../components/Center/Center";
2+
import Navigation from "../components/Demo1/Navigation";
3+
import ScrollSpy from "../components/src";
4+
5+
interface Props {}
6+
7+
const Demo1 = (props: Props) => {
8+
return (
9+
<>
10+
<Navigation />
11+
<ScrollSpy scrollThrottle={100}>
12+
<Center id="orange" backgroundColor={"orange"}>
13+
<h1>Orange</h1>
14+
</Center>
15+
<Center id="brown" backgroundColor={"brown"}>
16+
<h1>Brown</h1>
17+
</Center>
18+
<Center id="blue" backgroundColor={"blue"}>
19+
<h1>Blue</h1>
20+
</Center>
21+
<Center id="green" backgroundColor={"green"}>
22+
<h1>Green</h1>
23+
</Center>
24+
</ScrollSpy>
25+
</>
26+
);
27+
};
28+
29+
export default Demo1;

0 commit comments

Comments
 (0)