2.0.0 • Published 1 year ago

react-titled v2.0.0

Weekly downloads
367
License
MIT
Repository
github
Last release
1 year ago

React-titled

npm version npm downloads Build Status

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

Subscribe to changes

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