{"id":13437634,"url":"https://github.com/gaearon/react-document-title","last_synced_at":"2025-05-14T09:06:23.658Z","repository":{"id":21637228,"uuid":"24957851","full_name":"gaearon/react-document-title","owner":"gaearon","description":"Declarative, nested, stateful, isomorphic document.title for React","archived":false,"fork":false,"pushed_at":"2019-10-28T13:34:57.000Z","size":32,"stargazers_count":1863,"open_issues_count":21,"forks_count":105,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-08T11:27:56.850Z","etag":null,"topics":[],"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/gaearon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-08T19:51:49.000Z","updated_at":"2025-05-05T18:12:32.000Z","dependencies_parsed_at":"2022-06-26T07:31:31.375Z","dependency_job_id":null,"html_url":"https://github.com/gaearon/react-document-title","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaearon%2Freact-document-title","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaearon%2Freact-document-title/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaearon%2Freact-document-title/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaearon%2Freact-document-title/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaearon","download_url":"https://codeload.github.com/gaearon/react-document-title/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253823780,"owners_count":21969911,"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":[],"created_at":"2024-07-31T03:00:58.879Z","updated_at":"2025-05-14T09:06:23.621Z","avatar_url":"https://github.com/gaearon.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Awesome React","UI Utilities","JavaScript","UI Utilites","\u003e 1k ★","UI utilities"],"sub_categories":["Uncategorized","Tools","Meta Tags","Miscellaneous"],"readme":"React Document Title\n====================\n\nProvides a declarative way to specify `document.title` in a single-page app.  \nThis component can be used on server side as well.\n\nBuilt with [React Side Effect](https://github.com/gaearon/react-side-effect).\n\n## Installation\n\n```\nnpm install --save react-document-title\n```\n\nDependencies: React \u003e= 0.13.0\n\n## Features\n\n* Does not emit DOM, not even a `\u003cnoscript\u003e`;\n* Like a normal React compoment, can use its parent's `props` and `state`;\n* Can be defined in many places throughout the application;\n* Supports arbitrary levels of nesting, so you can define app-wide and page-specific titles;\n* Works just as well with isomorphic apps.\n\n## Example\n\nAssuming you use something like [react-router](https://github.com/rackt/react-router):\n\n```javascript\nfunction App() {\n  // Use \"My Web App\" if no child overrides this\n  return (\n    \u003cDocumentTitle title='My Web App'\u003e\n      \u003cSomeRouter /\u003e\n    \u003c/DocumentTitle\u003e\n  );\n}\n\nfunction HomePage() {\n  // Use \"Home\" while this component is mounted\n  return (\n    \u003cDocumentTitle title='Home'\u003e\n      \u003ch1\u003eHome, sweet home.\u003c/h1\u003e\n    \u003c/DocumentTitle\u003e\n  );\n}\n\nclass NewArticlePage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { title: 'Untitled' };\n  }\n\n  render() {\n    // Update using value from state while this component is mounted\n    return (\n      \u003cDocumentTitle title={this.state.title}\u003e\n        \u003cdiv\u003e\n          \u003ch1\u003eNew Article\u003c/h1\u003e\n          \u003cinput\n            value={this.state.title}\n            onChange={(e) =\u003e this.setState({ title: e.target.value })}\n          /\u003e\n        \u003c/div\u003e\n      \u003c/DocumentTitle\u003e\n    );\n  }\n}\n```\n\n## Server Usage\n\nIf you use it on server, call `DocumentTitle.rewind()` **after rendering components to string** to retrieve the title given to the innermost `DocumentTitle`. You can then embed this title into HTML page template.\n\nBecause this component keeps track of mounted instances, **you have to make sure to call `rewind` on server**, or you'll get a memory leak.\n\n## But What About Meta Tags?\n\nLooking for something more powerful? Check out [React Helmet](https://github.com/nfl/react-helmet)!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaearon%2Freact-document-title","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaearon%2Freact-document-title","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaearon%2Freact-document-title/lists"}