@solidjs/meta
v0.29.4TypeScript
Write meta tags to the document head
0/weekUpdated 1 years agoMITUnpacked: 20.9 KB
Published by Ryan Carniato
npm install @solidjs/meta
Solid Meta 
Asynchronous SSR-ready Document Head management for Solid based on React Head
> For Solid 1.0 use 0.27.x or greater.
> For versions of Solid 0.x use 0.26.x.
Motivation
This module allows you to define document.head tags anywhere in your component hierarchy. The motivations are similar to react-helmet in that you may only have the information for certain tags contextually deep in your component hiearchy. There are no dependencies and it should work fine with asynchronous rendering.
Installation
``sh`
npm i @solidjs/meta
How it works
1. You wrap your App with
2. To insert head tags within your app, just render one of
, , , , and components as often as needed.
3. One the server if you render the element using SolidJS in JSX you are all good. Otherwise use getAssets from solid-js/web to insert the assets where you want.On the server, the tags are collected, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags).
> [!IMPORTANT]
> Be sure to avoid adding any normal
tags in any server files (be it entry-server.jsx|tsx in SolidStart projects or inside your server file), as they would override the functionality of @solid/meta!
$3
1. Wrap your app with
inside of the root of the component.
2. You can optionally provide a fallback by providing a component inside of .####
app.jsx / app.tsx
jsx
// @refresh reload
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
import { Suspense } from "solid-js";
import "./app.css";export default function App() {
return (
SolidStart - Basic
Index
About
{props.children}
)}
>
);
}
`---
$3
Wrap your app with
on the server, using a tags[] array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags.`jsx
import { renderToString, getAssets } from 'solid-js/web';
import { MetaProvider } from '@solidjs/meta';
import App from './App';// ... within the context of a request ...
const app = renderToString(() =>
);
res.send(
${getAssets()}
${app}
);
`$3
There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the
.`jsx
import { MetaProvider, Title, Link, Meta } from '@solidjs/meta';const App = () => (
Title of page
// ...
);
``