Package Exports

react-titled
react-titled/es/index.js
react-titled/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-titled) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-titled

To fully control document.title in your React app.

Features

requires React v16.8+
supports nesting, similar to react-router
updates document.title only when all react-titled instances are reconciled
flexible, it lets you to specify how different levels should be concatenated
no dependencies, ~100 lines of code

Installation

yarn add react react-dom react-titled

Usage examples

Basic

import { Titled } from 'react-titled';

<Titled title={'Example.com'}>
  <h1>Welcome!</h1>
  <Titled title={title => `Homepage | ${title}`} />
</Titled>;

outputs

Homepage | Example.com

The deepest one wins

import { Titled } from 'react-titled';

<Titled title={() => 'Example.com'}>
  <Titled title={() => 'Homepage'} />
</Titled>;

outputs

Homepage

import { Titled } from 'react-titled';

<Titled title={() => 'Example.com'} onChange={title => console.log(title)}>
  <h1>Welcome!</h1>
  <Titled title={title => `Homepage | ${title}`} />
</Titled>;

Run Examples

git clone https://github.com/tajo/react-titled
cd react-titled
yarn install
yarn build:examples
open examples/index.html

Contributions Welcome!

git clone https://github.com/tajo/react-titled
cd react-titled
yarn install
yarn build:examples --watch
open examples/index.html

Run Tests

yarn test

Author

Vojtech Miksu 2018, miksu.cz, @vmiksu

react-titled