Registry / web-framework / react-title-component

react-title-component

library1.0.1jsnpmunverified

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.

web-framework

npm install react-title-component

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-TITLE-COMPON

react-title-component

web-frameworkjavascriptv1.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Title

✓ import Title from 'react-title-component'

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

Title is the default export, not a named export.

flushTitle

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

✗ import flushTitle from 'react-title-component'

flushTitle is a named export, not the default.

ReactTitle

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

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

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

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"

Debug

Known issues

gotchaConditionally 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.

affects: >=1.0.0

breakingReact 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+.

affects: >=1.0.0 <2.0.0

deprecatedThe 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.

affects: >=1.0.0

gotchaflushTitle() 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.

affects: >=1.0.0

gotchaThe '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.

affects: >=1.0.0

deprecatedReact.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.

affects: >=1.0.0

gotchaTitle 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

Using named import for the default export.

fix

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

TypeError: _reactTitleComponent2.default is not a function

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

fix

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

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

Missing render prop on Title component.

fix

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

flushTitle is not defined

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

fix

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

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

reactrequiredpeer dependency for React component

prop-typesoptionalruntime dependency for PropTypes (used in older React versions)

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/ryanflorence/react-title-component ↗

packagehttps://www.npmjs.com/package/react-title-component ↗