Skip to content

Instantly share code, notes, and snippets.

@HugeLetters

HugeLetters/Header.tsx

Last active December 11, 2025 02:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save HugeLetters/357f47358400e1e4c70aacddbd8a5cf5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save HugeLetters/357f47358400e1e4c70aacddbd8a5cf5 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic Delcarative Header
Raw
Header.tsx
import { contentStackAtom } from "@/hooks/useHeader";
import { useAtomValue } from "jotai";
export default function Header() {
const stack = useAtomValue(contentStackAtom).filter((node) => !!node.content);
return (
<header>
{stack.at(-1)?.content ?? "App Title"}
</header>
);
}
Raw
useHeader.tsx
import { immerAtom } from "@/utils/immer";
import { useSetAtom } from "jotai";
import { useEffect, useId, type ReactNode } from "react";
export default function useHeader(content: ReactNode): void {
const setContentStack = useSetAtom(contentStackAtom);
const id = useId();
useEffect(() => {
setContentStack((x) => {
const current = x.find((x) => x.id === id);
if (!current) {
x.push({ content, id });
return;
}
current.content = content;
});
}, [id, setContentStack, content]);
useEffect(() => {
return () => {
setContentStack((x) => x.filter((x) => x.id !== id));
};
}, [id, setContentStack]);
}
export const contentStackAtom = immerAtom<Array<{ content: ReactNode; id: string }>>([]);
@ackvf
Copy link

ackvf commented Dec 11, 2025

Hey, I found an interesting, simpler way to teleport components around. Check it out

facebook/react#12615 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment