{"library":"react-helmet-async","title":"Thread-safe Async React Helmet","description":"react-helmet-async is a robust solution for managing document head tags (title, meta, link, etc.) in React applications, designed to be thread-safe for server-side rendering (SSR). It addresses the limitations of the original `react-helmet` by encapsulating state on a per-request basis through a `<HelmetProvider>`, crucial for asynchronous SSR environments. The current stable version is 3.0.0, which introduces significant adaptations for React 19+, leveraging React's native metadata hoisting capabilities while maintaining backward compatibility for React 16-18. It differentiates itself by providing a consistent API across React versions, handling `htmlAttributes` and `bodyAttributes` consistently, and offering a context for SSR data extraction, although this context behaves differently in React 19. Releases appear to follow a non-strict cadence, driven by major React version updates and feature enhancements.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-helmet-async"],"cli":null},"imports":["import { Helmet } from 'react-helmet-async';","import { HelmetProvider } from 'react-helmet-async';","const { helmet } = helmetContext;"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Helmet, HelmetProvider } from 'react-helmet-async';\n\nconst App = () => (\n  <div>\n    <Helmet>\n      <html lang=\"en\" amp />\n      <title>My Awesome App</title>\n      <meta name=\"description\" content=\"A basic example of react-helmet-async.\" />\n      <link rel=\"canonical\" href=\"https://example.com/\" />\n      <style>{`body { background-color: #f0f0f0; }`}</style>\n      <script type=\"application/ld+json\">\n        {\n          \"@context\": \"https://schema.org\",\n          \"@type\": \"WebSite\",\n          \"url\": \"https://example.com/\",\n          \"name\": \"My Awesome App\"\n        }\n      </script>\n    </Helmet>\n    <h1>Welcome to My Awesome App!</h1>\n    <p>Check the document head for meta tags.</p>\n  </div>\n);\n\nconst rootElement = document.getElementById('app');\nif (rootElement) {\n  createRoot(rootElement).render(\n    <HelmetProvider>\n      <App />\n    </HelmetProvider>\n  );\n} else {\n  console.error('Root element #app not found!');\n}\n","lang":"typescript","description":"This quickstart demonstrates basic client-side usage of Helmet for managing document head attributes, title, meta, link, style, and script tags within a React application, wrapped in a HelmetProvider.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}