Unfocused

A tiny NPM package to update the page title when the tab isn't focused

Changelog

Demo

You can see a demo of it over here!

Installation and usage

Install the package

npm install unfocused --save

Implement it

import Unfocused from 'unfocused';

const unfocused = new Unfocused({
  blurTitle: "I'm blurred!",
  focusTitle: "I'm in focus!",
});

import React, {useEffect} from 'react';
import Unfocused from 'unfocused';

const App = () => {
  useEffect(() => {
    const unfocused = new Unfocused({
      blurTitle: "I'm blurred!",
      focusTitle: "I'm in focus!",
    });
    return () => {
      unfocused.destroy();
    };
  }, []);

  return <div />;
};

API

Name	Type	Default	Description
Instantiate	Object		An object containing blurTitle and and optional focusTitle
blurTitle	String		The page title to display when the page is blurred
focusTitle	String	document.title	The page title to display when the page is focused, if none provided, the current title will be used
destroy	Function		Method to call to remove the event listener

Browser support

• Chrome
• Firefox
• Safari
• IE10
• Edge

Development

1. yarn install
2. yarn dev

Building the project

1. yarn install
2. yarn build

Contributing

For bugs and feature requests, please open an issue. If you'd like to contribute, create a new PR with your changes. Make sure you update the changelog (if applicable).