Discovery:
Set position: fixed|avsolute on parent element, and you can choose between instant and smooth scroll-behaviors (scroll-behavior: initial|smooth)
But with position: sticky|relative|static you can't choose. You're stuck with smooth scrolling
explorer.exe .open .npm i bootstrap-toc@npm:bootstrap@5.1.3 --save-exact
npm i bootstrap@5.2.3 --save-exact
usage
const bootstrap = require("bootstrap-toc/dist/js/bootstrap.bundle.min.js");
new bootstrap.ScrollSpy(document.body, {
target: "#scroll-nav",
// give space for header
offset: 100,
});<select><br>, <img>, <hr> -> <hr/> (all elements must have closing tag / be self closing)JSX
Færre antall branches i code completion suggestion når du skriver git checkout feat-[Tab].
Slett alle branches som ikke finnes på remote:
git fetch -p(git fetch prune)
Også, sørg for å slette unødvendige tags
List tags
git taggit tag -d tagNameHvordan 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>
);
};Prøv å npm linke react
First off: prøv
# i app
rm package-lock.json
rm -rf node_modules
npm i
# i library prosjektet
npm link ../../app/node_modules/react # <--- nødvendig
npm run build # <--- nødvendig
# i app
npm link @library/package
^C
npm run devSecond: Toggle av og på det kommenterte nedenfor. Restart server mellom hver gang
// const path = require('path');
/** @type {import('next').NextConfig} */
const nextConfig = {
// webpack: {
// alias: {
// react: path.resolve('./node_modules/react'),
// },
// },
async rewrites() {
return [
// Rewrite everything else to use `pages/index`
{
source: "/:path*",
destination: "/",
},
];
},
};
module.exports = nextConfig;Kan ikke brue react hooks i react component library? Får du dispatcher is null? Eller noe a la cannot use usestate of null?
Da er det sikkert noe multiple react-versjoner greier som er trøbbelet. Du kan fikse dette ved å legge til react og react-dom som peerDependencies i library's package.json
"peerDependencies": {
"bootstrap": ">=5.2.3",
"react": "$react",
"react-dom": "$react"
},Eller fjern package-lock.json, node_modules og reinstaller alle packages
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
In browser console:
document.body.contentEditable = truewhy 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.
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
Lag et nytt conda environment med nyeste python versjon
sudo apt-get install taskwarrior
https://taskwarrior.org/download/
task version
yes for å lage config file (.taskrc)
📍 Legg til task
task add bla bla bla bla
📌 - med priority
task priority:H add bla bla bla bla
📅📃 List opp alle tasks
task next
next kan sløyfes
✔ Gjennomfør task nr X
task X done
❌ 🗑 Slett
task X delete
https://taskwarrior.org/docs/30second/
💬🗨 Se og rediger alle detalljer
task X edit
🗃 Opprett i prosjekter
task add project:Kitchen Select floor tiles
task add project:Kitchen Measure counter-top
task add project:Kitchen Design placement of electrical outlets
task add project:Kitchen Locate ideal placement for extractor duct
task add project:Kitchen Select and order counter-top material
task add project:Kitchen Talk to the Electrician about when the work can start
https://taskwarrior.org/docs/best-practices/
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={`${classes.root} d-none d-lg-block sticky-with-gutter list-group small`}
>
<nav>
{headings.map((heading) => {
const maybeActive = activeId === heading.id ? "active" : "";
return (
<li key={heading.id}>
<a
className={`list-group-item list-group-item-action ${maybeActive}`}
href={`#${heading.id}`}
>
{heading.text}
</a>
</li>
);
})}
</nav>
</div>
);
};