demo: add dynamic sections in demo

Author: Emanuel Suriano

package.json

@@ -13,7 +13,7 @@
   },
   "scripts": {
     "build": "yarn workspace react-scroll-section build",
-    "build:watch": "yarn workspace react-scroll-section build --watch",
+    "build:watch": "yarn workspace react-scroll-section build --watch --minify false",
     "start": "yarn workspace demo dev",
     "build:demo": "yarn build && yarn workspace demo build",
     "release": "yarn build && yarn workspace react-scroll-section release",

packages/demo/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@types/styled-components": "^5.1.26",
     "prop-types": "^15.8.1",
+    "randomcolor": "^0.6.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-github-corner": "^2.5.0",
@@ -19,6 +20,7 @@
     "styled-components": "5.3.6"
   },
   "devDependencies": {
+    "@types/randomcolor": "^0.5.6",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
     "@types/react-toggle": "^4.0.3",

packages/demo/src/App.tsx

@@ -1,16 +1,28 @@
 import { useState } from 'react';
 import { ScrollingProvider, Section } from 'react-scroll-section';
+import randomColor from 'randomcolor';
 import ModeToggle, { Mode } from './ModeToggle';
 import { DynamicMenu, StaticMenu } from './Menu';
 import { Footer, Menu, SectionContainer } from './Builders';
 import logo from './logo.svg';
 
 function App() {
   const [mode, setMode] = useState<Mode>('dynamic');
+  const [sections, setSections] = useState<string[]>([]);
 
   return (
     <ScrollingProvider>
-      <Menu>{mode === 'static' ? <StaticMenu /> : <DynamicMenu />}</Menu>
+      <Menu>
+        {mode === 'static' ? (
+          <StaticMenu />
+        ) : (
+          <DynamicMenu
+            onAdd={() =>
+              setSections((prev) => [...prev, `Section ${sections.length + 1}`])
+            }
+          />
+        )}
+      </Menu>
 
       <Section id="home">
         <SectionContainer>
@@ -22,29 +34,47 @@ function App() {
       </Section>
 
       <Section id="about">
-        <SectionContainer background="accent2">
+        <SectionContainer background={randomColor({ seed: 'about' })}>
           <span role="img" aria-label="hands up">
             🙋‍♂️
           </span>
         </SectionContainer>
       </Section>
 
       <Section id="projects">
-        <SectionContainer background="accent3">
+        <SectionContainer background={randomColor({ seed: 'projects' })}>
           <span role="img" aria-label="computer">
             💻
           </span>
         </SectionContainer>
       </Section>
 
       <Section id="contact">
-        <SectionContainer>
+        <SectionContainer background={randomColor({ seed: 'contact' })}>
           <span role="img" aria-label="letter">
             💌
           </span>
         </SectionContainer>
       </Section>
 
+      {sections.map((name) => (
+        <Section key={name} id={name}>
+          <SectionContainer background={randomColor({ seed: name })}>
+            <span>
+              {name}{' '}
+              <sup
+                aria-label="Remove section"
+                onClick={() =>
+                  setSections((prev) => prev.filter((id) => id !== name))
+                }
+              >
+                x
+              </sup>
+            </span>
+          </SectionContainer>
+        </Section>
+      ))}
+
       <Footer>
         <ModeToggle mode={mode} onChange={setMode} />
         <a href="https://www.netlify.com">

packages/demo/src/Builders.tsx

@@ -27,7 +27,7 @@ export const Item = styled.li<{ selected: boolean }>`
 `;
 
 export const SectionContainer = styled.section<{
-  background?: keyof DefaultTheme;
+  background?: string;
 }>`
   min-height: 100vh;
   min-width: 320px;
@@ -39,15 +39,20 @@ export const SectionContainer = styled.section<{
   text-align: center;
   scroll-behavior: smooth;
   position: 'relative';
-  background: ${(props) => props.theme[props.background || 'background']};
+  background: ${(props) => props.background || props.theme.background};
 
   & h1 {
     font-size: 2em;
   }
 
-  & span[role='img'] {
+  & span {
     font-size: 4em;
   }
+
+  & sup {
+    font-size: 0.5em;
+    cursor: pointer;
+  }
 `;
 
 export const Footer = styled.div`

packages/demo/src/Menu.tsx

@@ -1,7 +1,11 @@
 import { Item } from './Builders';
 import { useScrollSection, useScrollSections } from 'react-scroll-section';
 
-export const DynamicMenu = () => {
+type Props = {
+  onAdd: () => void;
+};
+
+export const DynamicMenu = ({ onAdd }: Props) => {
   const sections = useScrollSections();
 
   return (
@@ -11,6 +15,9 @@ export const DynamicMenu = () => {
           {id.toUpperCase()}
         </Item>
       ))}
+      <Item selected={false} onClick={onAdd} aria-label="Add section">
+        +
+      </Item>
     </>
   );
 };

yarn.lock

@@ -539,6 +539,11 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/randomcolor@^0.5.6":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@types/randomcolor/-/randomcolor-0.5.6.tgz#c1085077c4ae0f6af60e0ad229d14721b9b3b58c"
+  integrity sha512-lKkW8DGUQpZldTrwa+HM5rY+7eTyaHOMTsnj9ewt7AAwXuMPwBmkLlfh8+SXdgOhBW9iNI4x4zRjQ/TQZkdycQ==
+
 "@types/[email protected]":
   version "18.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
@@ -2237,6 +2242,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+randomcolor@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/randomcolor/-/randomcolor-0.6.2.tgz#7a57362ae1a1278439aeed2c15e5deb8ea33f56d"
+  integrity sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==
+
 [email protected]:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"