https://github.com/cyntler/use-window-blur-change-title

React Hook for set the page title when the user is shifting focus away from the current window.
https://github.com/cyntler/use-window-blur-change-title

change-document-title react react-hook react-window-blur

Last synced: about 8 hours ago
JSON representation

React Hook for set the page title when the user is shifting focus away from the current window.

• Host: GitHub
• URL: https://github.com/cyntler/use-window-blur-change-title
• Owner: cyntler
• License: mit
• Created: 2021-02-22T20:07:38.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-08-12T21:56:15.000Z (over 2 years ago)
• Last Synced: 2024-12-01T12:41:45.236Z (12 days ago)
• Topics: change-document-title, react, react-hook, react-window-blur
• Language: TypeScript
• Homepage:
• Size: 583 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-window-blur-change-title`
• awesome-react-hooks-cn - `use-window-blur-change-title`
• awesome-react-hooks - `use-window-blur-change-title`
• awesome-react-hooks - `use-window-blur-change-title`

README

        
[![npm-version](https://img.shields.io/npm/v/use-window-blur-change-title.svg)](https://www.npmjs.com/package/use-window-blur-change-title)

[![npm-download](https://img.shields.io/npm/dt/use-window-blur-change-title.svg)](https://www.npmjs.com/package/use-window-blur-change-title)

# use-window-blur-change-title

React Hook for set the page title when the user is shifting focus away from the current window.

## Installation

To install the hook you can use npm:

```shell

npm i use-window-blur-change-title

```

or Yarn if you prefer:

```shell

yarn add use-window-blur-change-title

```

## Usage

All you need is simple import the hook:

```tsx

import { useWindowBlurChangeTitle } from 'use-window-blur-change-title';

```

And call the hook in the body function component:

```tsx

useWindowBlurChangeTitle('Hey, please come back');

```

The hook takes **one parameter** - the new document title to appear in the blur time of the window. If the user returns to the window (focus), the title will be changed to the one before the change.

Full example:

```tsx

import { useWindowBlurChangeTitle } from 'use-window-blur-change-title';

export const AppComponent = () => {

  useWindowBlurChangeTitle('Hey, please come back');

  return 
Hello GitHub!
;

};

```