@solidjs/meta
Advanced tools
Readme
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.
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.
npm i @solidjs/meta
<MetaProvider /><Title />, <Meta />, <Style />, <Link />, and <Base /> components as often as needed.<head> 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).
Wrap your app with <MetaProvider /> 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.
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(() =>
<MetaProvider>
<App />
</MetaProvider>
);
res.send(`
<!doctype html>
<html>
<head>
${getAssets()}
</head>
<body>
<div id="root">${app}</div>
</body>
</html>
`);
There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the <head />.
import { MetaProvider, Title, Link, Meta } from '@solidjs/meta';
const App = () => (
<MetaProvider>
<div class="Home">
<Title>Title of page</Title>
<Link rel="canonical" href="http://solidjs.com/" />
<Meta name="example" content="whatever" />
// ...
</div>
</MetaProvider>
);
FAQs
Write meta tags to the document head
The npm package @solidjs/meta receives a total of 6,700 weekly downloads. As such, @solidjs/meta popularity was classified as popular.
We found that @solidjs/meta demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.