@tanstack/solid-router
Version:
Modern and scalable routing for Solid applications
23 lines • 1.09 kB
JSX
import { For } from 'solid-js';
import { Portal, isServer } from '@solidjs/web';
import { Asset } from './Asset';
import { useRouter } from './useRouter';
import { useTags } from './headContentUtils';
/**
* @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
* When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`
* to ensure it's part of the reactive tree and updates correctly during client-side navigation.
* The component uses portals internally to render content into the `<head>` element.
*/
export function HeadContent(props) {
const tags = useTags(props.assetCrossOrigin);
const router = useRouter();
const content = () => (<For each={tags()}>
{(tag) => {
const t = tag();
return <Asset tag={t.tag} attrs={t.attrs} children={t.children}/>;
}}
</For>);
return (isServer ?? router.isServer) ? (content()) : (<Portal mount={document.head}>{content()}</Portal>);
}
//# sourceMappingURL=HeadContent.jsx.map