React Title Component

1.0.1 verified Fri May 01 auth: no javascript maintenance

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.

Common errors

error Attempted import error: 'Title' is not exported from 'react-title-component'. ↓

cause Using named import for the default export.

fix

Change to default import: import Title from 'react-title-component'

error TypeError: _reactTitleComponent2.default is not a function ↓

cause In CommonJS, using destructured require assumes named exports, but Title is default export.

fix

Use: var Title = require('react-title-component').default;

error Warning: Failed prop type: The prop `render` is marked as required in `Title`, but its value is `undefined`. ↓

cause Missing render prop on Title component.

fix

Add a string or function render prop to the Title component.

error flushTitle is not defined ↓

cause flushTitle not imported or accessed correctly in server-side rendering.

fix

Ensure you import { flushTitle } from 'react-title-component' and call it after rendering.

Warnings

gotcha Conditionally rendering a Title component in the middle of the chain can break the title update logic. ↓

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.

breaking React 16+ requires prop-types to be explicitly installed; older versions included it automatically. ↓

fix Add prop-types as a dependency (npm install prop-types) if using React 16+.

deprecated The UMD build uses 'window.ReactTitle' which exposes the default export under 'default' property. ↓

fix Access via window.ReactTitle.default or use a bundler with ES modules.

gotcha flushTitle() must be called after renderToString to capture the full title; otherwise returns empty string. ↓

fix Call flushTitle() immediately after renderToString (or renderToNodeStream) before any further rendering.

gotcha The 'render' prop must be a string or a function returning a string; passing other types (e.g., numbers) will cause unexpected behavior. ↓

fix Always provide a string template or a function that returns a string.

deprecated React.createClass is no longer supported in React 16+; class or functional components should be used instead. ↓

fix Use class components extending React.Component or functional components with hooks.

gotcha Title component does not support dynamic updates via props after initial mount; title updates only on mount/unmount. ↓

fix Remount the component with new props to update the title, or use a different approach for dynamic titles.

Install

npm install react-title-component

yarn add react-title-component

pnpm add react-title-component

Imports

Title

wrong

import { Title } from 'react-title-component'

correct

import Title from 'react-title-component'

Title is the default export, not a named export.

flushTitle

wrong

import flushTitle from 'react-title-component'

correct

import { flushTitle } from 'react-title-component'

flushTitle is a named export, not the default.

ReactTitle

wrong

const { Title, flushTitle } = require('react-title-component')

correct

const ReactTitle = require('react-title-component'); const Title = ReactTitle.default; const flushTitle = ReactTitle.flushTitle;

With CommonJS, the default export lives under .default property. Named exports are accessible directly.

Quickstart

Demonstrates nested Title components composing the document title dynamically, and server-side flushing.

import React from 'react';
import { render } from 'react-dom';
import Title, { flushTitle } from 'react-title-component';

const App = () => (
  <div>
    <Title render="Home" />
    <Inner />
  </div>
);

const Inner = () => (
  <div>
    <Title render={prev => `${prev} - Dashboard`} />
  </div>
);

// For server-side rendering:
const html = renderToString(<App />);
const title = flushTitle();
console.log(title); // "Home - Dashboard"