https://github.com/tajo/react-titled
📃 Set document.title with ease. Nested. Flexible.
https://github.com/tajo/react-titled
Last synced: 29 days ago
JSON representation
📃 Set document.title with ease. Nested. Flexible.
- Host: GitHub
- URL: https://github.com/tajo/react-titled
- Owner: tajo
- License: mit
- Created: 2018-04-08T20:09:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-01-03T22:00:22.000Z (9 months ago)
- Last Synced: 2025-03-29T14:09:03.863Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 398 KB
- Stars: 46
- Watchers: 5
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-titled
[](https://www.npmjs.com/package/react-titled)
[](https://www.npmjs.com/package/react-titled)
[](https://github.com/tajo/react-titled/actions/workflows/ci.yml)
> 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
```shell
yarn add react react-dom react-titled
```
## Usage examples
### Basic
```jsx
import { Titled } from 'react-titled';
Welcome!
`Homepage | ${title}`} />
;
```
outputs
```
Homepage | Example.com
```
### The deepest one wins
```jsx
import { Titled } from 'react-titled';
'Example.com'}>
'Homepage'} />
;
```
outputs
```
Homepage
```
### Subscribe to changes
```jsx
import { Titled } from 'react-titled';
'Example.com'} onChange={title => console.log(title)}>
Welcome!
`Homepage | ${title}`} />
;
```
## Run Examples
```shell
git clone https://github.com/tajo/react-titled
cd react-titled
yarn install
yarn build:examples
open examples/index.html
```
## Contributions Welcome!
```shell
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](https://miksu.cz), [@vmiksu](https://twitter.com/vmiksu)