{"id":13394273,"url":"https://github.com/nfl/react-helmet","last_synced_at":"2025-05-14T12:09:01.117Z","repository":{"id":33910530,"uuid":"37627792","full_name":"nfl/react-helmet","owner":"nfl","description":"A document head manager for React","archived":false,"fork":false,"pushed_at":"2023-07-18T19:57:38.000Z","size":2148,"stargazers_count":17459,"open_issues_count":222,"forks_count":659,"subscribers_count":106,"default_branch":"master","last_synced_at":"2025-04-01T12:04:10.849Z","etag":null,"topics":["helmet","react","side-effect"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nfl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-06-18T00:07:34.000Z","updated_at":"2025-04-01T12:01:19.000Z","dependencies_parsed_at":"2024-06-18T10:56:56.914Z","dependency_job_id":null,"html_url":"https://github.com/nfl/react-helmet","commit_stats":{"total_commits":272,"total_committers":67,"mean_commits":4.059701492537314,"dds":0.75,"last_synced_commit":"1b57ddb1524bab195df3eeabafef67768a6d2a15"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfl%2Freact-helmet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfl%2Freact-helmet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfl%2Freact-helmet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfl%2Freact-helmet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nfl","download_url":"https://codeload.github.com/nfl/react-helmet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248344261,"owners_count":21088180,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["helmet","react","side-effect"],"created_at":"2024-07-30T17:01:14.527Z","updated_at":"2025-04-11T04:30:09.896Z","avatar_url":"https://github.com/nfl.png","language":"JavaScript","readme":"\u003cimg align=\"right\" width=\"200\" src=\"http://static.nfl.com/static/content/public/static/img/logos/react-helmet.jpg\" /\u003e\n\n# React Helmet\n\n[![npm Version](https://img.shields.io/npm/v/react-helmet.svg?style=flat-square)](https://www.npmjs.org/package/react-helmet)\n[![codecov.io](https://img.shields.io/codecov/c/github/nfl/react-helmet.svg?branch=master\u0026style=flat-square)](https://codecov.io/github/nfl/react-helmet?branch=master)\n[![Build Status](https://img.shields.io/travis/nfl/react-helmet/master.svg?style=flat-square)](https://travis-ci.org/nfl/react-helmet)\n[![Dependency Status](https://img.shields.io/david/nfl/react-helmet.svg?style=flat-square)](https://david-dm.org/nfl/react-helmet)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md#pull-requests)\n\nThis reusable React component will manage all of your changes to the document head.\n\nHelmet _takes_ plain HTML tags and _outputs_ plain HTML tags. It's dead simple, and React beginner friendly.\n\n## [6.1.0 Major Changes](https://github.com/nfl/react-helmet/releases/tag/6.1.0)\n\n\n## Example\n```javascript\nimport React from \"react\";\nimport {Helmet} from \"react-helmet\";\n\nclass Application extends React.Component {\n  render () {\n    return (\n        \u003cdiv className=\"application\"\u003e\n            \u003cHelmet\u003e\n                \u003cmeta charSet=\"utf-8\" /\u003e\n                \u003ctitle\u003eMy Title\u003c/title\u003e\n                \u003clink rel=\"canonical\" href=\"http://mysite.com/example\" /\u003e\n            \u003c/Helmet\u003e\n            ...\n        \u003c/div\u003e\n    );\n  }\n};\n```\n\nNested or latter components will override duplicate changes:\n\n```javascript\n\u003cParent\u003e\n    \u003cHelmet\u003e\n        \u003ctitle\u003eMy Title\u003c/title\u003e\n        \u003cmeta name=\"description\" content=\"Helmet application\" /\u003e\n    \u003c/Helmet\u003e\n\n    \u003cChild\u003e\n        \u003cHelmet\u003e\n            \u003ctitle\u003eNested Title\u003c/title\u003e\n            \u003cmeta name=\"description\" content=\"Nested component\" /\u003e\n        \u003c/Helmet\u003e\n    \u003c/Child\u003e\n\u003c/Parent\u003e\n```\n\noutputs:\n\n```html\n\u003chead\u003e\n    \u003ctitle\u003eNested Title\u003c/title\u003e\n    \u003cmeta name=\"description\" content=\"Nested component\"\u003e\n\u003c/head\u003e\n```\n\nSee below for a full reference guide.\n\n## Features\n- Supports all valid head tags: `title`, `base`, `meta`, `link`, `script`, `noscript`, and `style` tags.\n- Supports attributes for `body`, `html` and `title` tags.\n- Supports server-side rendering.\n- Nested components override duplicate head changes.\n- Duplicate head changes are preserved when specified in the same component (support for tags like \"apple-touch-icon\").\n- Callback for tracking DOM changes.\n\n## Compatibility\n\nHelmet 5 is fully backward-compatible with previous Helmet releases, so you can upgrade at any time without fear of breaking changes. We encourage you to update your code to our more semantic API, but please feel free to do so at your own pace.\n\n## Installation\n\nYarn:\n```bash\nyarn add react-helmet\n```\n\nnpm:\n```bash\nnpm install --save react-helmet\n```\n\n## Server Usage\nTo use on the server, call `Helmet.renderStatic()` after `ReactDOMServer.renderToString` or `ReactDOMServer.renderToStaticMarkup` to get the head data for use in your prerender.\n\nBecause this component keeps track of mounted instances, **you have to make sure to call `renderStatic` on server**, or you'll get a memory leak.\n\n```javascript\nReactDOMServer.renderToString(\u003cHandler /\u003e);\nconst helmet = Helmet.renderStatic();\n```\n\nThis `helmet` instance contains the following properties:\n- `base`\n- `bodyAttributes`\n- `htmlAttributes`\n- `link`\n- `meta`\n- `noscript`\n- `script`\n- `style`\n- `title`\n\nEach property contains `toComponent()` and `toString()` methods. Use whichever is appropriate for your environment. For attributes, use the JSX spread operator on the object returned by `toComponent()`. E.g:\n\n### As string output\n```javascript\nconst html = `\n    \u003c!doctype html\u003e\n    \u003chtml ${helmet.htmlAttributes.toString()}\u003e\n        \u003chead\u003e\n            ${helmet.title.toString()}\n            ${helmet.meta.toString()}\n            ${helmet.link.toString()}\n        \u003c/head\u003e\n        \u003cbody ${helmet.bodyAttributes.toString()}\u003e\n            \u003cdiv id=\"content\"\u003e\n                // React stuff here\n            \u003c/div\u003e\n        \u003c/body\u003e\n    \u003c/html\u003e\n`;\n```\n\n### As React components\n```javascript\nfunction HTML () {\n    const htmlAttrs = helmet.htmlAttributes.toComponent();\n    const bodyAttrs = helmet.bodyAttributes.toComponent();\n\n    return (\n        \u003chtml {...htmlAttrs}\u003e\n            \u003chead\u003e\n                {helmet.title.toComponent()}\n                {helmet.meta.toComponent()}\n                {helmet.link.toComponent()}\n            \u003c/head\u003e\n            \u003cbody {...bodyAttrs}\u003e\n                \u003cdiv id=\"content\"\u003e\n                    // React stuff here\n                \u003c/div\u003e\n            \u003c/body\u003e\n        \u003c/html\u003e\n    );\n}\n```\n\n### Note: Use the same instance\nIf you are using a prebuilt compilation of your app with webpack in the server be sure to include this in the `webpack file` so that the same instance of `react-helmet` is used.\n```\nexternals: [\"react-helmet\"],\n```\nOr to import the *react-helmet* instance from the app on the server.\n\n### Reference Guide\n\n```javascript\n\u003cHelmet\n    {/* (optional) set to false to disable string encoding (server-only) */}\n    encodeSpecialCharacters={true}\n\n    {/*\n        (optional) Useful when you want titles to inherit from a template:\n\n        \u003cHelmet\n            titleTemplate=\"%s | MyAwesomeWebsite.com\"\n        \u003e\n            \u003ctitle\u003eNested Title\u003c/title\u003e\n        \u003c/Helmet\u003e\n\n        outputs:\n\n        \u003chead\u003e\n            \u003ctitle\u003eNested Title | MyAwesomeWebsite.com\u003c/title\u003e\n        \u003c/head\u003e\n    */}\n    titleTemplate=\"MySite.com - %s\"\n\n    {/*\n        (optional) used as a fallback when a template exists but a title is not defined\n\n        \u003cHelmet\n            defaultTitle=\"My Site\"\n            titleTemplate=\"My Site - %s\"\n        /\u003e\n\n        outputs:\n\n        \u003chead\u003e\n            \u003ctitle\u003eMy Site\u003c/title\u003e\n        \u003c/head\u003e\n    */}\n    defaultTitle=\"My Default Title\"\n    \n    {/* (optional) set to false to not use requestAnimationFrame and instead update the DOM as soon as possible.\n        Useful if you want to update the title when the tab is out of focus \n    */}\n    defer={false}\n\n    {/* (optional) callback that tracks DOM changes */}\n    onChangeClientState={(newState, addedTags, removedTags) =\u003e console.log(newState, addedTags, removedTags)}\n\u003e\n    {/* html attributes */}\n    \u003chtml lang=\"en\" amp /\u003e\n\n    {/* body attributes */}\n    \u003cbody className=\"root\" /\u003e\n\n    {/* title attributes and value */}\n    \u003ctitle itemProp=\"name\" lang=\"en\"\u003eMy Plain Title or {`dynamic`} title\u003c/title\u003e\n\n    {/* base element */}\n    \u003cbase target=\"_blank\" href=\"http://mysite.com/\" /\u003e\n\n    {/* multiple meta elements */}\n    \u003cmeta name=\"description\" content=\"Helmet application\" /\u003e\n    \u003cmeta property=\"og:type\" content=\"article\" /\u003e\n\n    {/* multiple link elements */}\n    \u003clink rel=\"canonical\" href=\"http://mysite.com/example\" /\u003e\n    \u003clink rel=\"apple-touch-icon\" href=\"http://mysite.com/img/apple-touch-icon-57x57.png\" /\u003e\n    \u003clink rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"http://mysite.com/img/apple-touch-icon-72x72.png\" /\u003e\n    {locales.map((locale) =\u003e {\n        \u003clink rel=\"alternate\" href=\"http://example.com/{locale}\" hrefLang={locale} key={locale}/\u003e\n    })}\n\n    {/* multiple script elements */}\n    \u003cscript src=\"http://include.com/pathtojs.js\" type=\"text/javascript\" /\u003e\n\n    {/* inline script elements */}\n    \u003cscript type=\"application/ld+json\"\u003e{`\n        {\n            \"@context\": \"http://schema.org\"\n        }\n    `}\u003c/script\u003e\n\n    {/* noscript elements */}\n    \u003cnoscript\u003e{`\n        \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"foo.css\" /\u003e\n    `}\u003c/noscript\u003e\n\n    {/* inline style elements */}\n    \u003cstyle type=\"text/css\"\u003e{`\n        body {\n            background-color: blue;\n        }\n\n        p {\n            font-size: 12px;\n        }\n    `}\u003c/style\u003e\n\u003c/Helmet\u003e\n```\n\n## Contributing to this project\nPlease take a moment to review the [guidelines for contributing](CONTRIBUTING.md).\n\n* [Pull requests](CONTRIBUTING.md#pull-requests)\n* [Development Process](CONTRIBUTING.md#development)\n\n## License\n\nMIT\n\n\u003cimg align=\"left\" height=\"200\" src=\"http://static.nfl.com/static/content/public/static/img/logos/ENG_SigilLockup_4C_POS_RGB.png\" /\u003e\n","funding_links":[],"categories":["JavaScript","UI Utilities","Uncategorized","UI Utilites","React","Features","*.js","react 相关库","前端开发框架及项目","React [🔝](#readme)","🧰 React Toolkit","UI Components / UI Tools"],"sub_categories":["Meta Tags","Uncategorized","React","macros","其他_文本生成、文本对话","Search Engine Optimization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnfl%2Freact-helmet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnfl%2Freact-helmet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnfl%2Freact-helmet/lists"}