{"_id":"@dr.pogodin/react-helmet","_rev":"3964928","name":"@dr.pogodin/react-helmet","description":"Thread-safe Helmet for React 19+ and friends","dist-tags":{"latest":"3.0.2"},"maintainers":[{"name":"dr.pogodin","email":""}],"time":{"modified":"2025-09-01T01:52:41.000Z","created":"2025-02-22T18:00:58.968Z","3.0.2":"2025-05-05T09:38:41.754Z","3.0.1":"2025-04-07T16:10:02.991Z","3.0.0":"2025-04-07T09:37:11.208Z","2.0.4":"2025-02-22T18:00:58.968Z"},"users":{},"author":{"name":"Dr. Sergey Pogodin","email":"doc@pogodin.studio","url":"https://dr.pogodin.studio"},"repository":{"type":"github","url":"git+https://github.com/birdofpreyru/react-helmet.git"},"versions":{"3.0.2":{"name":"@dr.pogodin/react-helmet","version":"3.0.2","description":"Thread-safe Helmet for React 19+ and friends","main":"./build/common/index.js","module":"./build/module/index.js","types":"./build/types/index.d.ts","exports":{"types":"./build/types/index.d.ts","module":"./build/module/index.js","default":"./build/common/index.js"},"scripts":{"build":"rimraf build && npm run build:types && npm run build:common && npm run build:module","build:common":"rimraf build/common && babel src -x .ts,.tsx --out-dir build/common --source-maps","build:module":"rimraf build/module && babel src -x .ts,.tsx --out-dir build/module --source-maps --config-file ./babel.module.config.js","build:types":"rimraf build/types && tsc --project tsconfig.types.json","lint":"eslint","test":"npm run lint && npm run typecheck && npm run jest","typecheck":"tsc","jest":"jest --config config/jest/config.js"},"repository":{"type":"github","url":"git+https://github.com/birdofpreyru/react-helmet.git"},"keywords":["helmet","javascript","meta","react"],"author":{"name":"Dr. Sergey Pogodin","email":"doc@pogodin.studio","url":"https://dr.pogodin.studio"},"license":"Apache-2.0","bugs":{"url":"https://github.com/birdofpreyru/react-helmet/issues"},"homepage":"https://github.com/birdofpreyru/react-helmet#readme","dependencies":{"@babel/runtime":"^7.27.1"},"devDependencies":{"@babel/cli":"^7.27.1","@babel/plugin-transform-runtime":"^7.27.1","@babel/preset-env":"^7.27.1","@babel/preset-react":"^7.27.1","@babel/preset-typescript":"^7.27.1","@dr.pogodin/eslint-configs":"^0.0.5","@jest/globals":"^29.7.0","@testing-library/jest-dom":"6.6.3","@testing-library/react":"16.3.0","@tsconfig/recommended":"^1.0.8","@types/jest":"^29.5.14","@types/react":"^19.1.2","@types/react-dom":"^19.1.3","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","raf":"^3.4.1","react":"^19.1.0","react-dom":"^19.1.0","rimraf":"6.0.1"},"peerDependencies":{"react":"19"},"_id":"@dr.pogodin/react-helmet@3.0.2","gitHead":"71641d916fb8511078e02532a4b389417f0d09c4","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"shasum":"f28a7a895a2435fcfeef7b11aa59a5953620ec1c","size":58447,"noattachment":false,"key":"/@dr.pogodin/react-helmet/-/@dr.pogodin/react-helmet-3.0.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/@dr.pogodin/react-helmet/download/@dr.pogodin/react-helmet-3.0.2.tgz"},"_npmUser":{"name":"dr.pogodin","email":"dr.pogodin+studio@gmail.com"},"directories":{},"maintainers":[{"name":"dr.pogodin","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-helmet_3.0.2_1746437921564_0.7417301700552077"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-05-05T09:38:41.754Z","publish_time":1746437921754,"_source_registry_name":"default","_cnpm_publish_time":1746437921754},"3.0.1":{"name":"@dr.pogodin/react-helmet","version":"3.0.1","description":"Thread-safe Helmet for React 19+ and friends","main":"./build/common/index.js","module":"./build/module/index.js","types":"./build/types/index.d.ts","exports":{"types":"./build/types/index.d.ts","module":"./build/module/index.js","default":"./build/common/index.js"},"scripts":{"build":"rimraf build && npm run build:types && npm run build:common && npm run build:module","build:common":"rimraf build/common && babel src -x .ts,.tsx --out-dir build/common --source-maps","build:module":"rimraf build/module && babel src -x .ts,.tsx --out-dir build/module --source-maps --config-file ./babel.module.config.js","build:types":"rimraf build/types && tsc --project tsconfig.types.json","lint":"eslint","test":"npm run lint && npm run typecheck && npm run jest","typecheck":"tsc","jest":"jest --config config/jest/config.js"},"repository":{"type":"github","url":"git+https://github.com/birdofpreyru/react-helmet.git"},"keywords":["helmet","javascript","meta","react"],"author":{"name":"Dr. Sergey Pogodin","email":"doc@pogodin.studio","url":"https://dr.pogodin.studio"},"license":"Apache-2.0","bugs":{"url":"https://github.com/birdofpreyru/react-helmet/issues"},"homepage":"https://github.com/birdofpreyru/react-helmet#readme","dependencies":{"@babel/runtime":"^7.26.9"},"devDependencies":{"@babel/cli":"^7.27.0","@babel/plugin-transform-runtime":"^7.26.10","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","@babel/preset-typescript":"^7.27.0","@dr.pogodin/eslint-configs":"^0.0.1","@jest/globals":"^29.7.0","@testing-library/jest-dom":"6.6.3","@testing-library/react":"16.3.0","@tsconfig/recommended":"^1.0.8","@types/jest":"^29.5.14","@types/react":"^19.1.0","@types/react-dom":"^19.1.1","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","raf":"^3.4.1","react":"^19.1.0","react-dom":"^19.1.0","rimraf":"6.0.1"},"peerDependencies":{"react":"19"},"_id":"@dr.pogodin/react-helmet@3.0.1","gitHead":"64b5318926aa8cc35d7d5686491c37c6594839f0","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"shasum":"c7c8c841928e8f9bcf1ec191c5fd0b254e244474","size":54512,"noattachment":false,"key":"/@dr.pogodin/react-helmet/-/@dr.pogodin/react-helmet-3.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@dr.pogodin/react-helmet/download/@dr.pogodin/react-helmet-3.0.1.tgz"},"_npmUser":{"name":"dr.pogodin","email":"dr.pogodin+studio@gmail.com"},"directories":{},"maintainers":[{"name":"dr.pogodin","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-helmet_3.0.1_1744042202790_0.8150554672282262"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-04-07T16:10:02.991Z","publish_time":1744042202991,"_source_registry_name":"default","_cnpm_publish_time":1744042202991},"3.0.0":{"name":"@dr.pogodin/react-helmet","version":"3.0.0","description":"Thread-safe Helmet for React 19+ and friends","main":"./build/common/index.js","module":"./build/module/index.js","types":"./build/types/index.d.ts","exports":{"types":"./build/types/index.d.ts","module":"./build/module/index.js","default":"./build/common/index.js"},"scripts":{"build":"rimraf build && npm run build:types && npm run build:common && npm run build:module","build:common":"rimraf build/common && babel src -x .ts,.tsx --out-dir build/common --source-maps","build:module":"rimraf build/module && babel src -x .ts,.tsx --out-dir build/module --source-maps --config-file ./babel.module.config.js","build:types":"rimraf build/types && tsc --project tsconfig.types.json","lint":"eslint","test":"npm run lint && npm run typecheck && npm run jest","typecheck":"tsc","jest":"jest --config config/jest/config.js"},"repository":{"type":"github","url":"git+https://github.com/birdofpreyru/react-helmet.git"},"keywords":["helmet","javascript","meta","react"],"author":{"name":"Dr. Sergey Pogodin","email":"doc@pogodin.studio","url":"https://dr.pogodin.studio"},"license":"Apache-2.0","bugs":{"url":"https://github.com/birdofpreyru/react-helmet/issues"},"homepage":"https://github.com/birdofpreyru/react-helmet#readme","dependencies":{"@babel/runtime":"^7.26.9"},"devDependencies":{"@babel/cli":"^7.27.0","@babel/eslint-parser":"^7.26.8","@babel/eslint-plugin":"^7.25.9","@babel/plugin-transform-runtime":"^7.26.9","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","@babel/preset-typescript":"^7.26.0","@eslint/js":"^9.21.0","@jest/globals":"^29.7.0","@stylistic/eslint-plugin":"^4.1.0","@testing-library/jest-dom":"6.6.3","@testing-library/react":"16.2.0","@tsconfig/recommended":"^1.0.8","@types/jest":"^29.5.14","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","eslint":"^9.21.0","eslint-import-resolver-typescript":"^3.8.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jest":"^28.11.0","eslint-plugin-react":"^7.37.4","eslint-plugin-react-hooks":"^5.2.0","globals":"^16.0.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","raf":"^3.4.1","react":"^19.0.0","react-dom":"^19.0.0","rimraf":"6.0.1","typescript":"5.7","typescript-eslint":"^8.25.0"},"peerDependencies":{"react":"19"},"_id":"@dr.pogodin/react-helmet@3.0.0","gitHead":"09b39127815f8db90e46699e4754bf49ed4fa46c","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"shasum":"05f65e8cc4f8462884b980adc0147e32da72b678","size":56117,"noattachment":false,"key":"/@dr.pogodin/react-helmet/-/@dr.pogodin/react-helmet-3.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@dr.pogodin/react-helmet/download/@dr.pogodin/react-helmet-3.0.0.tgz"},"_npmUser":{"name":"dr.pogodin","email":"dr.pogodin+studio@gmail.com"},"directories":{},"maintainers":[{"name":"dr.pogodin","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-helmet_3.0.0_1744018630964_0.11175518619329639"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-04-07T09:37:11.208Z","publish_time":1744018631208,"_source_registry_name":"default","_cnpm_publish_time":1744018631208},"2.0.4":{"name":"@dr.pogodin/react-helmet","version":"2.0.4","description":"Thread-safe Helmet for React 16+ and friends","main":"./lib/index.js","module":"./lib/index.esm.js","types":"./lib/index.d.ts","exports":{"types":"./lib/index.d.ts","import":"./lib/index.esm.js","default":"./lib/index.js"},"scripts":{"clean":"rimraf lib","build":"yarn run clean && NODE_ENV=production tsx build.ts && yarn types","lint":"eslint --cache --cache-location ./node_modules/.cache/eslint --report-unused-disable-directives .","test":"yarn lint && yarn typecheck && yarn vitest","typecheck":"yarn tsc","types":"tsc src/index.tsx --jsx react --declaration --esModuleInterop --allowJs --emitDeclarationOnly --outDir lib","vitest":"vitest run"},"repository":{"type":"github","url":"git+https://github.com/birdofpreyru/react-helmet.git"},"keywords":["helmet","javascript","meta","react"],"author":{"name":"Dr. Sergey Pogodin","email":"doc@pogodin.studio","url":"https://dr.pogodin.studio"},"license":"Apache-2.0","bugs":{"url":"https://github.com/birdofpreyru/react-helmet/issues"},"homepage":"https://github.com/birdofpreyru/react-helmet#readme","dependencies":{"invariant":"^2.2.4","react-fast-compare":"^3.2.2","shallowequal":"^1.1.0"},"devDependencies":{"@remix-run/eslint-config":"2.3.1","@testing-library/jest-dom":"6.1.5","@testing-library/react":"14.1.2","@types/eslint":"8.44.8","@types/invariant":"2.2.37","@types/jsdom":"21.1.6","@types/react":"18.2.39","@types/shallowequal":"1.1.5","@vitejs/plugin-react":"4.2.0","esbuild":"0.19.8","eslint":"8.54.0","jsdom":"22.1.0","raf":"3.4.1","react":"18.2.0","react-dom":"18.2.0","rimraf":"5.0.5","tsx":"4.6.1","typescript":"5.2.2","vite":"4.5.0","vitest":"0.34.6"},"peerDependencies":{"react":"19"},"packageManager":"yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e","_id":"@dr.pogodin/react-helmet@2.0.4","gitHead":"3e8ae13d78506a2511da63dfadd56ef1ae963e34","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"shasum":"8a32458ad87701f259d6f0dea77294f4f5a0a92c","size":17963,"noattachment":false,"key":"/@dr.pogodin/react-helmet/-/@dr.pogodin/react-helmet-2.0.4.tgz","tarball":"http://registry.cnpm.dingdandao.com/@dr.pogodin/react-helmet/download/@dr.pogodin/react-helmet-2.0.4.tgz"},"_npmUser":{"name":"dr.pogodin","email":"dr.pogodin+studio@gmail.com"},"directories":{},"maintainers":[{"name":"dr.pogodin","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-helmet_2.0.4_1740247258704_0.8145199047290188"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-02-22T18:00:58.968Z","publish_time":1740247258968,"_source_registry_name":"default","_cnpm_publish_time":1740247258968}},"readme":"# React Helmet\n\n[![Latest NPM Release](https://img.shields.io/npm/v/@dr.pogodin/react-helmet.svg)](https://www.npmjs.com/package/@dr.pogodin/react-helmet)\n[![NPM Downloads](https://img.shields.io/npm/dm/@dr.pogodin/react-helmet.svg)](https://www.npmjs.com/package/@dr.pogodin/react-helmet)\n[![CircleCI](https://dl.circleci.com/status-badge/img/gh/birdofpreyru/react-helmet/tree/master.svg?style=shield)](https://app.circleci.com/pipelines/github/birdofpreyru/react-helmet)\n[![GitHub repo stars](https://img.shields.io/github/stars/birdofpreyru/react-helmet?style=social)](https://github.com/birdofpreyru/react-helmet)\n[![Dr. Pogodin Studio](https://raw.githubusercontent.com/birdofpreyru/react-helmet/master/.README/logo-dr-pogodin-studio.svg)](https://dr.pogodin.studio/docs/react-helmet)\n\nAdvanced management of document head's elements (`<base>`, `<link>`, `<meta>`,\n`<noscript>`, `<script>`, `<style>`, `<title>`), and of attributes of `<body>`\nand `<html>` elements in React 19+ applications. This library is a proud\nsuccessor of now unmaintained and stale\n[react-helmet-async](https://github.com/staylor/react-helmet-async) and\n[react-helmet](https://github.com/nfl/react-helmet) libraries.\n\n[![Sponsor](https://raw.githubusercontent.com/birdofpreyru/js-utils/master/.README/sponsor.svg)](https://github.com/sponsors/birdofpreyru)\n\n### Sponsored By\n[<img width=36 src=\"https://avatars.githubusercontent.com/u/17030877?v=4&s=36\" />](https://github.com/RigoOnRails)\n\n### [Contributors](https://github.com/birdofpreyru/react-helmet/graphs/contributors)\n[<img width=36 src=\"https://avatars.githubusercontent.com/u/20144632?s=36\" />](https://github.com/birdofpreyru)\n\n## Table of Contents\n- [Getting Started]\n- [Prioritizing Tags for SEO]\n- [Reference]\n  - [Helmet] &mdash; specifies elements and attributes to be created / set /\n    overriden.\n  - [HelmetDataContext] &mdash; context object for server-side rendering (SSR)\n    purposes.\n  - [HelmetProvider] &mdash; provides [React Context] to [Helmet] components.\n  - [MetaTags] &mdash; helper component for easier rendering of page title,\n    description, and meta-data for search engines, and social graphs (_i.e._\n    previews of linked pages in social networks, messengers, _etc._).\n\n## Getting Started\n[Getting Started]: #getting-started\n\nTo install the library:\n```sh\nnpm install --save @dr.pogodin/react-helmet\n```\n\nAt a high level, wrap the main application tree into [HelmetProvider]:\n```tsx\nimport type { FunctionComponent } from 'react';\nimport { HelmetProvider } from '@dr.pogodin/react-helmet';\n\nconst YourApp: FunctionComponent = () => {\n  /* Whatever code you need. */\n  return (\n    <HelmetProvider>\n      { /* Your application tree. */ }\n    </HelmetProvider>\n  );\n}\n```\n\nAnywhere within the [HelmetProvider]'s children tree use [Helmet] component\nto set / modify document head's elements, or supported attributes of `<body>`\nand `<html>` elements. Instances of [Helmet] component within the application\ntree add or override elements and attributes in the order these [Helmet]\ninstances are rendered.\n```tsx\nimport type { FunctionComponent } from 'react';\nimport { Helmet } from '@dr.pogodin/react-helmet';\n\nconst SomeComponent: FunctionComponent = () => {\n  /* Whatever code you need. */\n  return (\n    <div>\n      <Helmet>\n        <title>My Title</title>\n        <link rel=\"canonical\" href=\"http://mysite.com/example\" />\n        <meta charSet=\"utf-8\" />\n        <meta name=\"description\" content=\"Some Component\" />\n      </Helmet>\n      { /* Whatever other stuff you need. */ }\n\n      { /* For example, this other <Helmet> component will override the title\n           and description set earlier in the render tree. */ }\n      <Helmet>\n        <title>Overriden Title</title>\n        <meta name=\"description\" content=\"Overriden Component Description\" />\n      </Helmet>\n    </div>\n  )\n};\n```\n\nAlternatively, all elements and attributes specified by [Helmet] components may\nbe provided _via_ props instead of children.\n```tsx\nimport type { FunctionComponent } from 'react';\nimport { Helmet } from '@dr.pogodin/react-helmet';\n\nconst SomeComponent: FunctionComponent = () => {\n  /* Whatever code you need. */\n  return (\n    <div>\n      <Helmet\n        title=\"My Title\"\n        link={[{\n          href: 'http://mysite.com/example',\n          rel: 'canonical',\n        }]}\n        meta={[{\n          charSet: 'utf-8',\n        }, {\n          content: 'Some Component',\n          name: 'description',\n        }]}\n      />\n      { /* Whatever other stuff you need. */ }\n\n      { /* For example, this other <Helmet> component will override the title\n           and description set earlier in the render tree. It is also fine to\n           use a mix of props and children. */ }\n      <Helmet title=\"Overriden Title\">\n        <meta name=\"description\" content=\"Overriden Component Description\" />\n      </Helmet>\n    </div>\n  )\n};\n```\n\nFor the server-side rendering purposes you pass in a `context` object to\nthe [HelmetProvider], and after the render you use that object to retrieve\nthe string, or component representation of the elements and attributes to be\ninjected into the document head (if you use streaming for server side rendering\nyou should output your `<head>` data outside `renderToNodeStream()`):\n```tsx\nimport type { FunctionComponent } from 'react';\nimport { type HelmetDataContext, HelmetProvider } from '@dr.pogodin/react-helmet';\n\nasync function yourServerSideRenderingFunction() {\n  // ...\n  const context: HelmetDataContext = {};\n  const { prelude } = await prerenderToNodeStream(\n    <HelmetProvider context={context}>\n      { /* Your application tree. */ }\n    </HelmetProvider>\n  );\n  // ...\n\n  // For example, this is how you get the string representation of <meta> tags\n  // to be injected into your document head.\n  const metaElements = context.helmet.meta?.toString();\n}\n```\n\n## Prioritizing Tags for SEO\n[Prioritizing Tags for SEO]: #prioritizing-tags-for-seo\n\nIt is understood that in some cases for SEO, certain tags should appear earlier\nin the HEAD. Using the `prioritizeSeoTags` flag on any `<Helmet>` component\nallows the server render of @dr.pogodin/react-helmet to expose a method for\nprioritizing relevant SEO tags.\n\nIn the component:\n```tsx\n<Helmet prioritizeSeoTags>\n  <title>A fancy webpage</title>\n  <link rel=\"notImportant\" href=\"https://www.chipotle.com\" />\n  <meta name=\"whatever\" value=\"notImportant\" />\n  <link rel=\"canonical\" href=\"https://www.tacobell.com\" />\n  <meta property=\"og:title\" content=\"A very important title\"/>\n</Helmet>\n```\n\nIn your server template:\n```tsx\n<html>\n  <head>\n    ${helmet.title.toString()}\n    ${helmet.priority.toString()}\n    ${helmet.meta.toString()}\n    ${helmet.link.toString()}\n    ${helmet.script.toString()}\n  </head>\n  ...\n</html>\n```\n\nWill result in:\n```html\n<html>\n  <head>\n    <title>A fancy webpage</title>\n    <meta property=\"og:title\" content=\"A very important title\"/>\n    <link rel=\"canonical\" href=\"https://www.tacobell.com\" />\n    <meta name=\"whatever\" value=\"notImportant\" />\n    <link rel=\"notImportant\" href=\"https://www.chipotle.com\" />\n  </head>\n  ...\n</html>\n```\n\nA list of prioritized tags and attributes (`SEO_PRIORITY_TAGS`) can be found in\n[constants.ts](./src/constants.ts).\n\n## Reference\n[Reference]: #reference\n\n### Helmet\n[Helmet]: #helmet\n\nThe [Helmet] component specifies (document head) elements and attributes to be\ncreated / set / overriden by the library. Different [Helmet] instances within\nthe application tree (within the single [HelmetProvider]) have effect in the\norder they are encountered (mounted to DOM) during the render.\n\nThe [Helmet] component exposes two equivalent APIs &mdash; the elements /\nattributes may be provided either as component's children (_i.e._ written as\nregular JSX component children), or as [Helmet] component props. Both these\nAPIs can also be used at the same time, with values provided as props handled\nas additional JSX children, appearing prior the explicitly provided JSX children.\n\n**Props**\n- `base` &mdash; _To be documented_\n\n- `bodyAttributes` &mdash; _To be documented_\n\n- `defaultTitle` &mdash; **string** | **undefined** &mdash; Optional.\n  The fallback to use when `titleTemplate` (below) prop is provided,\n  but no title was specified:\n  ```tsx\n  // JSX code:\n  <Helmet\n    defaultTitle=\"My Site\"\n    titleTemplate\"My Site - %s\"\n  />\n\n  // DOM output:\n  <head>\n    <title>My Site</title>\n  </head>\n  ```\n\n- `defer` &mdash; **boolean** | **undefined** &mdash; Optional. Defaults _true_.\n  set to _false_ to not use `requestAnimationFrame` and instead update the DOM\n  as soon as possible. Useful if you want to update the title when the tab is\n  out of focus.\n\n- `encodeSpecialCharacters` &mdash; **boolean** | **undefined** &mdash;\n  Optional. Defaults _true_. Set _false_ to disable string encoding by\n  `.toString()` methods of [HelmetDataContext].\n\n- `htmlAttributes` &mdash; _To be documented_\n\n- `link` &mdash; _To be documented_\n\n- `meta` &mdash; _To be documented_\n\n- `noscript` &mdash; _To be documented_\n\n- `onChangeClientState` &mdash; **function** | **undefined** &mdash; Optional.\n  A callback to trigger on client-side each time the head elements / attributes\n  are updated. It will be called with three arguments:\n  - `newState` &mdash; _To be documented_\n  - `addedTags` &mdash; _To be documented_\n  - `removedTags` &mdash; _To be documented_\n\n- `prioritizeSeoTags` &mdash; _To be documented_\n\n- `script` &mdash; _To be documented_\n\n- `style` &mdash; _To be documented_\n\n- `title` &mdash; _To be documented_\n\n- `titleAttributes` &mdash; _To be documented_\n\n- `titleTemplate` &mdash; **string** | **undefined** &mdash; Optional.\n  Allows to inherit title from a template, _e.g._\n  ```tsx\n  // JSX code:\n  <Helmet titleTemplate=\"%s | MyAwesomeWebsite.com\">\n    <title>Nested Title</title>\n  </Helmet>\n\n  // DOM output:\n  <head>\n    <title>Nested Title | MyAwesomeWebsite.com</title>\n  </head>\n  ```\n\n**Children**\n\n```tsx\n<Helmet>\n    {/* html attributes */}\n    <html lang=\"en\" amp />\n\n    {/* body attributes */}\n    <body className=\"root\" />\n\n    {/* title attributes and value */}\n    <title itemProp=\"name\" lang=\"en\">My Plain Title or {`dynamic`} title</title>\n\n    {/* base element */}\n    <base target=\"_blank\" href=\"http://mysite.com/\" />\n\n    {/* multiple meta elements */}\n    <meta name=\"description\" content=\"Helmet application\" />\n    <meta property=\"og:type\" content=\"article\" />\n\n    {/* multiple link elements */}\n    <link rel=\"canonical\" href=\"http://mysite.com/example\" />\n    <link rel=\"apple-touch-icon\" href=\"http://mysite.com/img/apple-touch-icon-57x57.png\" />\n    <link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"http://mysite.com/img/apple-touch-icon-72x72.png\" />\n    {locales.map((locale) => {\n        <link rel=\"alternate\" href=\"http://example.com/{locale}\" hrefLang={locale} key={locale}/>\n    })}\n\n    {/* multiple script elements */}\n    <script src=\"http://include.com/pathtojs.js\" type=\"text/javascript\" />\n\n    {/* inline script elements */}\n    <script type=\"application/ld+json\">{`\n        {\n            \"@context\": \"http://schema.org\"\n        }\n    `}</script>\n\n    {/* noscript elements */}\n    <noscript>{`\n        <link rel=\"stylesheet\" type=\"text/css\" href=\"foo.css\" />\n    `}</noscript>\n\n    {/* inline style elements */}\n    <style type=\"text/css\">{`\n        body {\n            background-color: blue;\n        }\n\n        p {\n            font-size: 12px;\n        }\n    `}</style>\n</Helmet>\n```\n\n### HelmetDataContext\n[HelmetDataContext]: #helmetdatacontext\n\nThe [HelmetDataContext] (it may be initialized as just an empty object) can be\nprovided to [HelmetProvider] for server-side rendering (SSR) purposes. After\nthe component tree has been rendered, the `helmet` field will be attached to\nthis context:\n```tsx\ntype HelmetDataContext = {\n  helmet?: {\n    base: HelmetDatum;\n    bodyAttributes: HelmetDatum;\n    htmlAttributes: HelmetDatum;\n    link: HelmetDatum;\n    meta: HelmetDatum;\n    noscript: HelmetDatum;\n    script: HelmetDatum;\n    style: HelmetDatum;\n    title: HelmetDatum;\n    titleAttributes?: HelmetDatum;\n    priority: HelmetDatum;\n  };\n};\n\n// where each HelmetDatum has two methods allowing to get string and component\n// representations of the corresponding elements or attrbiutes:\ntype HelmetDatum = {\n  toString(): string;\n  toComponent(): ReactNode;\n};\n```\n\n### HelmetProvider\n[HelmetProvider]: #helmetprovider\n\nThe [HelmetProvider] component provides [React Context] to [Helmet]\ncomponents, _i.e._ any [Helmet] components in the application tree must be\ndescendants of a single [HelmetProvider] instance.\n\n**Props**\n- `children` &mdash; **ReactNode** &mdash; The component tree to render in\n  the place of [HelmetProvider].\n- `context` &mdash; [HelmetDataContext] | **undefined** &mdash; Optional.\n  A user-provided context object for server-side rendering (SSR) purposes.\n\n### MetaTags\n[MetaTags]: #metatags\nThe [MetaTags] component is a helper for easier rendering of page title,\ndescription, and misc meta tags for search engines and social graphs (_i.e._ for\npreviews of linked pages in social media, messengers, _etc._). Based on provided\nproperties it uses [Helmet] to render:\n- `<title>` and `<meta name=\"description\">` tags.\n- Meta tags for [Open Graph].\n- Meta tags for [Twitter (X) Cards].\n\n```tsx\n// Simple Example.\n\nimport type { FunctionComponent } from 'react';\nimport { MetaTags } from '@dr.pogodin/react-helmet';\n\nconst Example: FunctionComponent = () => (\n  <MetaTags\n    description=\"Example page description\"\n    title=\"Example page title\"\n  />\n);\n\n// It is completely equivalent to:\n\nimport type { FunctionComponent } from 'react';\nimport { Helmet } from '@dr.pogodin/react-helmet';\n\nconst EquivalentComponent: FunctionComponent = () => (\n  <Helmet>\n    <title>Example page title</title>\n    <meta content=\"Example page description\" name=\"description\" />\n\n    <meta content=\"summary_large_image\" name=\"twitter:card\" />\n    <meta content=\"Example page title\" name=\"twitter:title\" />\n    <meta content=\"Example page description\" name=\"twitter:description\" />\n\n    <meta content=\"Example page title\" name=\"og:title\" />\n    <meta content=\"Example page description\" name=\"og:description\" />\n  </Helmet>\n);\n```\nAs this example demonstrates, [MetaTags] must not be wrapped into [Helmet],\nas it will render its instance itself, but the same as [Helmet] components,\nall [MetaTags] instances should be descendants of [HelmetProvider] within\nthe application component tree.\n\nMultiple [MetaTags] within the application tree override the tags they manage\naccording to the usual [Helmet] logic.\n\n**Required Properties**:\n\n- `description` &mdash; **string** &mdash; Page description to use in\n  the _description_ meta tag, and as the default description in [Open Graph]\n  and [Twitter (X) Cards].\n\n- `title` &mdash; **string** &mdash; The page name to use in the `<title>` tag,\n  and as the default title in [Open Graph] and [Twitter (X) Cards].\n\n**Optional Properties**:\n\n- `children` &mdash; **ReactNode** &mdash; Component children, if any,\n  are rendered at the component's place.\n\n  All meta data injected by [MetaTags] instance are passed down the children\n  tree using an auxiliary context, thus facilitating tags modification\n  by children. For example:\n\n  ```tsx\n  import { type FunctionComponent, use } from 'react';\n  import { MetaTags } from '@dr.pogodin/react-helmet';\n\n  const Child: FunctionComponent = () => {\n    // These are values injected by parent <MetaTags> component, if any.\n    const { title, description, ...rest } = use(MetaTags.Context);\n\n    // Say, you may modify the \"parent\" title like this:\n    return <MetaTags title={`${title} / Child Component`} />;\n  };\n\n  const Parent: FunctionComponent = () => (\n    <MetaTags title=\"Parent Component\">\n      <Child />\n    </MetaTags>\n  );\n  ```\n\n- `extraMetaTags` &mdash; **Array&lt;\\{ content: string; name: string \\}&gt;**\n  &mdash; Allows to add additional, arbitrary `<meta>` tags to the page, with\n  given `content` and `name` strings.\n\n- `image` &mdash; **string** &mdash; The absolute URL of thumbnail image to use\n  in [Open Graph] and [Twitter (X) Cards] meta tags (`twitter:image`,\n  and `og:image`). By default these tags are not injected.\n\n  **BEWARE:** The value must be a complete, absolute URL, including the correct\n  website domain and HTTP schema.\n\n- `siteName` &mdash; **string** &mdash; The site name to use in `twitter:site`,\n  and `og:sitename` meta tags. By default these tags are not injected.\n\n- `socialDescription` &mdash; **string** &mdash; The site description to use in\n  `twitter:description` and `og:description` meta tags. By default the value of\n  `description` prop is used.\n\n- `socialTitle` &mdash; **string** &mdash; The page title to use in `twitter:title`,\n  `og:title`, and `og:image:alt` meta tags. By default the value of `title` prop\n  is used. Also the `og:image:alt` tag is only injected if `image` prop\n  is present.\n\n- `url` &mdash; **string** &mdash; The page URL to use in `og:url` meta tag.\n  By default the tag is not injected.\n\n[Open Graph]: https://ogp.me\n[React Context]: https://react.dev/learn/passing-data-deeply-with-context\n[Twitter (X) Cards]: https://developer.x.com/en/docs/x-for-websites/cards/overview/abouts-cards\n","_attachments":{},"homepage":"https://github.com/birdofpreyru/react-helmet#readme","bugs":{"url":"https://github.com/birdofpreyru/react-helmet/issues"},"license":"Apache-2.0"}