{"id":26167,"library":"react-title-component","title":"React Title Component","description":"A React component for nested document title management, allowing parent and child components to collaboratively build the document title. Version 1.0.1 is the latest stable release; no active development or major updates have occurred since its initial release. It supports both CommonJS and ES6 modules, works with React Router for route-driven titles, and provides server-side rendering support via a flushTitle() function. Unlike simpler solutions, it handles dynamic title composition from deeply nested components without requiring manual string concatenation or context propagation.","status":"maintenance","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/ryanflorence/react-title-component","tags":["javascript","react","react-component","title"],"install":[{"cmd":"npm install react-title-component","lang":"bash","label":"npm"},{"cmd":"yarn add react-title-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-title-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for React component","package":"react","optional":false},{"reason":"runtime dependency for PropTypes (used in older React versions)","package":"prop-types","optional":true}],"imports":[{"note":"Title is the default export, not a named export.","wrong":"import { Title } from 'react-title-component'","symbol":"Title","correct":"import Title from 'react-title-component'"},{"note":"flushTitle is a named export, not the default.","wrong":"import flushTitle from 'react-title-component'","symbol":"flushTitle","correct":"import { flushTitle } from 'react-title-component'"},{"note":"With CommonJS, the default export lives under .default property. Named exports are accessible directly.","wrong":"const { Title, flushTitle } = require('react-title-component')","symbol":"ReactTitle","correct":"const ReactTitle = require('react-title-component'); const Title = ReactTitle.default; const flushTitle = ReactTitle.flushTitle;"}],"quickstart":{"code":"import React from 'react';\nimport { render } from 'react-dom';\nimport Title, { flushTitle } from 'react-title-component';\n\nconst App = () => (\n  <div>\n    <Title render=\"Home\" />\n    <Inner />\n  </div>\n);\n\nconst Inner = () => (\n  <div>\n    <Title render={prev => `${prev} - Dashboard`} />\n  </div>\n);\n\n// For server-side rendering:\nconst html = renderToString(<App />);\nconst title = flushTitle();\nconsole.log(title); // \"Home - Dashboard\"","lang":"typescript","description":"Demonstrates nested Title components composing the document title dynamically, and server-side flushing."},"warnings":[{"fix":"Ensure every component that renders a Title always renders it (unconditionally). Use state or other means to control content without adding/removing the Title component.","message":"Conditionally rendering a Title component in the middle of the chain can break the title update logic.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add prop-types as a dependency (npm install prop-types) if using React 16+.","message":"React 16+ requires prop-types to be explicitly installed; older versions included it automatically.","severity":"breaking","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Access via window.ReactTitle.default or use a bundler with ES modules.","message":"The UMD build uses 'window.ReactTitle' which exposes the default export under 'default' property.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Call flushTitle() immediately after renderToString (or renderToNodeStream) before any further rendering.","message":"flushTitle() must be called after renderToString to capture the full title; otherwise returns empty string.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always provide a string template or a function that returns a string.","message":"The 'render' prop must be a string or a function returning a string; passing other types (e.g., numbers) will cause unexpected behavior.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use class components extending React.Component or functional components with hooks.","message":"React.createClass is no longer supported in React 16+; class or functional components should be used instead.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Remount the component with new props to update the title, or use a different approach for dynamic titles.","message":"Title component does not support dynamic updates via props after initial mount; title updates only on mount/unmount.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Change to default import: import Title from 'react-title-component'","cause":"Using named import for the default export.","error":"Attempted import error: 'Title' is not exported from 'react-title-component'."},{"fix":"Use: var Title = require('react-title-component').default;","cause":"In CommonJS, using destructured require assumes named exports, but Title is default export.","error":"TypeError: _reactTitleComponent2.default is not a function"},{"fix":"Add a string or function render prop to the Title component.","cause":"Missing render prop on Title component.","error":"Warning: Failed prop type: The prop `render` is marked as required in `Title`, but its value is `undefined`."},{"fix":"Ensure you import { flushTitle } from 'react-title-component' and call it after rendering.","cause":"flushTitle not imported or accessed correctly in server-side rendering.","error":"flushTitle is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}