Convert React Prop Types to TS type annotations

For filer i mappe hvis navn er "pages":

npx jscodeshift -t https://mskelton.dev/ratchet.ts pages/**/*.{ts,tsx}

https://github.com/mskelton/ratchet

funker ikke på destructured props, da

eleventy stuff

Eleventy stuff

• https://glitch-hello-eleventy.glitch.me/ glitch has web editor for markdown with preview
  • https://glitch.com/edit/#!/classy-zesty-bird?path=README.md%3A1%3A0
• https://github.com/kohrongying/11ty-blog-starter has a create bash script

eleventy.js

Return specific post

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("bundle.css");
  eleventyConfig.addPlugin(syntaxHighlight);
  eleventyConfig.addCollection("post", function (collection) {
    const coll = collection.getFilteredByTag("post");
    console.log(coll);
    return [coll[20]];
  });
};

Return first 5 posts

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("bundle.css");
  eleventyConfig.addPlugin(syntaxHighlight);
  eleventyConfig.addCollection("post", function (collection) {
    const coll = collection.getFilteredByTag("post");
    console.log(coll);
    return coll.slice(0, 5);
  });
};

i18next

Usage with long nested keys

const { t } = useTranslation("translation", {
  keyPrefix: "long.nested.keys",
});

log variable with key

VS Code snippet

  "Print variable to console": {
    "scope": "javascript,typescript",
    "prefix": "logvar",
    "body": "console.log('$1', $1)"
  }

table of contents with IntersectionOvserver (not perfect)

useScrollSpy.ts

import { useEffect, useRef, useState } from "react";

export function useScrollSpy(ids: string[]) {
  const [activeId, setActiveId] = useState();
  const observer = useRef();

  useEffect(() => {
    const elements = ids.map((id) => document.getElementById(id));

    observer.current?.disconnect();

    elements.forEach((heading) => {
      if (heading) {
        observer.current?.observe(heading);
      }
    });

    observer.current = new IntersectionObserver(
      (entries) => {
        console.group("executing intersectionobserver callback");

        entries.forEach((entry) => {
          if (entry?.isIntersecting) {
            console.log(entry.target.id, "is intersecting");

            setActiveId(entry.target.id);
          }
        });
        console.groupEnd();
      },
      { rootMargin: "0% 0% -80% 0%", threshold: 0.1 }
    );

    return () => observer.current?.disconnect();
  }, [ids]);
  return activeId;
}

TableOfContents.tsx

import React, { useEffect, useState } from "react";
import classes from "./TableOfContents.module.css";
import { useScrollSpy } from "@/hooks/useScrollSpy";
interface TableOfContentsProps {
isLoading: boolean;
}
export type heading = { text: string | null; id: string };
export const TableOfContents = ({ isLoading }: TableOfContentsProps) => {
const [headings, setHeadings] = useState<heading[]>([]);
const activeId = useScrollSpy(headings.map(({ id }) => id));
useEffect(() => {
if (!isLoading) {
const elements: heading[] = Array.from(
document.querySelectorAll("h3")
).map((element) => ({ text: element.textContent, id: element.id }));
setHeadings(elements);
}
}, [isLoading]);
return (
<div
className={</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>classes<span class="token punctuation">.</span>root<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> d-none d-lg-block sticky-with-gutter list-group small</span><span class="token template-punctuation string">}
>
<nav>
{headings.map((heading) => {
const maybeActive = activeId === heading.id ? "active" : "";
return (
<li key={heading.id}>
<a
className={</span><span class="token string">list-group-item list-group-item-action </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>maybeActive<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">}
href={</span><span class="token string">#</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>heading<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">}
>
{heading.text}
</a>
</li>
);
})}
</nav>
</div>
);
};

why not multiple BrowserRouters

why not use multiple browserrouters

React Router error - 
    Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
    at Router (/vendors-node_modules_restart_hooks_esm_useForceUpdate_js-node_modules_restart_hooks_esm_usePr-cdac26.iframe.bundle.js:6709:103)
    at renderWithHooks (/vendors-node_modules_storybook_addon-a11y_dist_preview_mjs-node_modules_storybook_addon-essen-d391cf.iframe.bundle.js:38091:27)
    at mountIndeterminateComponent (/vendors-node_modules_storybook_addon-a11y_dist_preview_mjs-node_modules_storybook_addon-essen-d391cf.iframe.bundle.js:41855:13)
at beginWork (/vendors-node_modules_storybook_addon-a11y_dist_preview_mjs-node_modules_storybook_addon-essen-d391cf.iframe.bundle.js:43368:16)
    at beginWork$1 (/vendors-node_modules_storybook

Drew Reese - . There becomes an issue when you start nesting routers within routers, or rather it's the routing contexts within other routing contexts. The contexts of "outer" routers are unaware of what nested "inner" routers have handled.

https://stackoverflow.com/questions/67175039/is-it-possible-to-have-multiple-browserrouter-in-react-app

scriptedalchemy - Dont think you want have multiple browser routers. Youd want to use switch or something else. Only hosts should implement browser router, and only once. Usually I have a standalone wrapper that has like a mini shell for each app. Then I federate the inner component. So browser router stays on the shell layer

nebarf - Single source of truth: having a single "component" updating the browser history brings a lot of flexibility (e.g. it could really help in case you're gradually migrating a legacy system following the strangler pattern).

https://github.com/module-federation/module-federation-examples/issues/1986

Use functions as children

Hvordan kan man lage et komponent som exposer en dataverdi som parent kan få tak i?

I.e. hvordan kan ChildComponent her gjøre dette lov?

          <ChildComponent>
            {({idFromChild}) => {
              return (
                <Button
                  href={`link/to/${idFromChild}`}
                >
					click here
                </Button>
              );
            }}
          </ChildComponent>

Slik:

export const ChildComponent = ({id}) => {
  return (
    <div>
      {children({
        id: id,
      })}
    </div>
  );
};

Convert all JS files in folder to TS

for f in *.js; do mv -- "$f" "${f%.js}.tsx"; done

https://unix.stackexchange.com/questions/19654/how-do-i-change-the-extension-of-multiple-files

Bootstrap scrollspy react

HTML

with data attributes ✔

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div style="display: flex; background: #f5f2f2;">
      <aside>
        <div id="list-example" class="list-group">
          <a class="list-group-item list-group-item-action" href="#heading1">
            Heading 1
          </a>
          <a class="list-group-item list-group-item-action" href="#heading2">
            Heading 2
          </a>
          <a class="list-group-item list-group-item-action" href="#heading3">
            Heading 3
          </a>
          <a class="list-group-item list-group-item-action" href="#heading4">
            Heading 4
          </a>
          <a class="list-group-item list-group-item-action" href="#heading5">
            Heading 5
          </a>
        </div>
      </aside>
      <article
        data-bs-spy="scroll"
        data-bs-target="#list-example"
        tabIndex="0"
        style="position: relative; height: 500px; overflow-y: scroll;"
      >
        <!--<article style="position: relative; height: 500px; overflow-y: scroll;">-->
        <h1>Hello CodeSandbox</h1>
        <h2 id="heading1">Heading 1</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading2">Heading 2</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading3">Heading 3</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading4">Heading 4</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading5">Heading 5</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
      </article>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      /*const scrollSpy = new bootstrap.ScrollSpy(document.body, {
        target: "#list-example"
      });*/
      // $("body").scrollspy({ target: "#navbar-example" });
    </script>
  </body>
</html>

with JS ❌

Highlight only goes down

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div style="display: flex; background: #f5f2f2;">
      <aside>
        <div id="list-example" class="list-group">
          <a class="list-group-item list-group-item-action" href="#heading1">
            Heading 1
          </a>
          <a class="list-group-item list-group-item-action" href="#heading2">
            Heading 2
          </a>
          <a class="list-group-item list-group-item-action" href="#heading3">
            Heading 3
          </a>
          <a class="list-group-item list-group-item-action" href="#heading4">
            Heading 4
          </a>
          <a class="list-group-item list-group-item-action" href="#heading5">
            Heading 5
          </a>
        </div>
      </aside>
      <article style="position: relative; height: 500px; overflow-y: scroll;">
        <h1>Hello CodeSandbox</h1>
        <h2 id="heading1">Heading 1</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading2">Heading 2</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading3">Heading 3</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading4">Heading 4</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <h2 id="heading5">Heading 5</h2>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
      </article>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="jquery-3.6.4.min.js"></script>
    <script>
      const scrollSpy = new bootstrap.ScrollSpy(document.body, {
        target: "#list-example"
      });
      // $("body").scrollspy({ target: "#navbar-example" });
    </script>
  </body>
</html>

With JS ✔

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Static Template</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div style="background: #f5f2f2;">
      <aside class="navbar navbar-nav fixed-top">
        <div id="list-example" class="list-group">
          <a class="list-group-item list-group-item-action" href="#heading1">
            Heading 1
          </a>
          <a class="list-group-item list-group-item-action" href="#heading2">
            Heading 2
          </a>
          <a class="list-group-item list-group-item-action" href="#heading3">
            Heading 3
          </a>
          <a class="list-group-item list-group-item-action" href="#heading4">
            Heading 4
          </a>
          <a class="list-group-item list-group-item-action" href="#heading5">
            Heading 5
          </a>
        </div>
      </aside>
      <article>
        <!--<article style="position: relative; height: 500px; overflow-y: scroll;">-->
<h1>Hello CodeSandbox</h1>
<h2 id="heading1">Heading 1</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading2">Heading 2</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading3">Heading 3</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading4">Heading 4</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading5">Heading 5</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</article>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: "#navbar"
});
});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
      crossorigin="anonymous"
    ></script>
  </head>

  <body class="m-3">
    <center>
      <div id="navbar">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#geeks1">Geeks</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#for">For</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#geeks2">Geeks</a>
            </li>
          </ul>
        </nav>
        <br /><br />
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Scrollspy in Bootstrap 5 via Javascript</strong>
        <br />
        <div id="geeks1" class="border border-dark" style="padding: 20px 20px;">
          <h1>About Us</h1>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>
            GeeksforGeeks is a one-stop destination for Computer Science
            students. Computer Science is a huge field, thus students must
            select a suitable platform that can meet all their needs, including
            Tutorials & Courses, Placement Preparation, and Interview
            Experiences, among others.
          </p>

          <p></p>
        </div>

        <div id="for" class="border border-warning" style="padding: 20px 20px;">
          <h1>Advantages</h1>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>

          <p>
            1. One-Stop Destination for Algorithms and Data Structures Knowledge
          </p>
          <p>2. Learn Multiple Programming Languages</p>
          <p>
            3. Boost Your Skills with Various GeeksforGeeks Courses
          </p>
        </div>

        <div
          id="geeks2"
          class="border border-secondary"
          style="padding: 20px 20px;"
        >
          <h1>Technology</h1>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>
          <p>EEEEEEEEE</p>

          <p>
            A Computer Science portal for geeks. It contains well written, well
            thought and well explained computer science and programming
            articles, quizzes and practice/competitive programming/company
            interview Questions.
          </p>
          <p>Prepare With Us</p>
          <p>Get Hired With Us</p>
          <p>Grow With Usling!</p>
        </div>
      </div>
    </center>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var scrollSpy = new bootstrap.ScrollSpy(document.body, {
          target: "#navbar"
        });
      });
    </script>
  </body>
</html>

React

With data attributes ❌

not working at all

With JS 1: ✔

import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import * as bootstrap from "bootstrap";
import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
import { useState, useEffect } from "react";
export default function App() {
useEffect(() => {
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: "#list-example"
});
}, []);
return (
<div
style={{
background: "#f5f2f2"
}}
>
<aside class="navbar navbar-nav fixed-top">
<div id="list-example" className="list-group">
<a
className="list-group-item list-group-item-action"
href="#heading1"
>
Heading 1
</a>
<a
className="list-group-item list-group-item-action"
href="#heading2"
>
Heading 2
</a>
<a
className="list-group-item list-group-item-action"
href="#heading3"
>
Heading 3
</a>
<a
className="list-group-item list-group-item-action"
href="#heading4"
>
Heading 4
</a>
<a
className="list-group-item list-group-item-action"
href="#heading5"
>
Heading 5
</a>
<a
className="list-group-item list-group-item-action"
href="#heading6"
>
Heading 6
</a>
</div>
</aside>
<article>
<h1>Hello CodeSandbox</h1>
<h2 id="heading1">Heading 1</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading2">Heading 2</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading3">Heading 3</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading4">Heading 4</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading5">Heading 5</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading6">Heading 6</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</article>
</div>
);
}

With JS 2 ❌

Highlight only goes down

import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
//import "bootstrap/dist/js/bootstrap.js";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import * as bootstrap from "bootstrap";
//import "bootstrap/dist/js/bootstrap.bundle.min";
import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
import { useState, useEffect } from "react";
export default function App() {
useEffect(() => {
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: "#list-example"
});
}, []);
return (
<div
style={{
display: "flex",
background: "#f5f2f2"
}}
>
<aside>
<div id="list-example" className="list-group">
<a
className="list-group-item list-group-item-action"
href="#heading1"
>
Heading 1
</a>
<a
className="list-group-item list-group-item-action"
href="#heading2"
>
Heading 2
</a>
<a
className="list-group-item list-group-item-action"
href="#heading3"
>
Heading 3
</a>
<a
className="list-group-item list-group-item-action"
href="#heading4"
>
Heading 4
</a>
<a
className="list-group-item list-group-item-action"
href="#heading5"
>
Heading 5
</a>
<a
className="list-group-item list-group-item-action"
href="#heading6"
>
Heading 6
</a>
</div>
</aside>
<article
data-bs-spy="scroll"
data-bs-target="#list-example"
tab-index="0"
style={{ position: "relative", height: "500px", overflowY: "scroll" }}
>
<h1>Hello CodeSandbox</h1>
<h2 id="heading1">Heading 1</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading2">Heading 2</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading3">Heading 3</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading4">Heading 4</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading5">Heading 5</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2 id="heading6">Heading 6</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</article>
</div>
);
}

create context

https://react.dev/reference/react/createContext

context.ts

import {createContext} from 'react';
export interface ContextProps {
darkTheme: boolean;
}
export const AppContext = createContext<ContextProps>({
darkTheme: true,
});

App

const Context2 = Context as React.Context<ContextProps>;
return (
<AppContext2.Provider value={{darkTheme: false}}>
{/* -- content -- */}

Rename React component

# ask in what path the component resides in
# if no answer is provided, use default value
# -e flag is for giving cd-code completion while answering the question

defaultValue=src/components/
read -e -p "Where is component located? (default: $defaultValue): " location
location=${location:-$defaultValue}
cd $location
read -e -p "Enter component name you want to rename: " currentName
cd $currentName
# if component ends with a trailing slash
if [[ "$currentName" == */ ]]; then
# remove trailing slash
currentName=${currentName%/}
fi
indexFile=index.ts
componentFile=$currentName.tsx
storyFile=$currentName.stories.tsx
stylesheetFile=$currentName.module.css
stylesheetScssFile=$currentName.module.scss
if [[ $currentName != "" ]]; then
echo
echo "This will try and rename:"
echo "---- folder -----"
echo $currentName
echo
echo "---- files -----"
echo - $indexFile
echo - $componentFile
echo - $storyFile
echo - $stylesheetFile
echo - $stylesheetScssFile
echo
read -p "Enter new name: " newName
if [[ $newName != "" ]]; then
echo
echo "search replace in files"
echo
sed -i "s/$currentName/$newName/g" $indexFile
sed -i "s/$currentName/$newName/g" $componentFile
sed -i "s/$currentName/$newName/g" $storyFile
sed -i "s/$currentName/$newName/g" $stylesheetFile
sed -i "s/$currentName/$newName/g" $stylesheetScssFile
echo
echo "rename files and folders"
echo
mv $componentFile $newName.tsx
mv $storyFile $newName.stories.tsx
mv $stylesheetFile $newName.module.css
mv $stylesheetScssFile $newName.module.scss
cd ..
mv $currentName $newName/
fi
fi