react-use-please-stay

A fun React hook that animates the document title and/or favicon when focus from the page is lost.

Parameters

Parameters for usePleaseStay are passed via an object of type UsePleaseStayOptions (click me!).

| Name | Type | Default Value | Description | | ------------------ | -------------------------- | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | titles | ArrayOfOneOrMore<string> | Required, an array of strings with at least one value | The titles to iterate through. Note that with certain AnimationType only the first title is taken. | | animationType | AnimationType | AnimationType.LOOP | The animation type on the title. There are three types:- AnimationType.LOOP: each title in the titles is iterated sequentially- AnimationType.CASCADE: Only the first title in the titles array is taken, and the title is modified by adding one letter at a time- AnimationType.MARQUEE - only the first title in the titles array is taken, and the title animates across the tab in a marquee fashion | | faviconLinks | ArrayOfTwoOrMore<string> | undefined | The desired favicon links to animate through | | interval | number | 500 | The rate in milliseconds at which the title and favicon change occurs | | shouldAlwaysPlay | boolean | false | The rate in milliseconds at which the title and favicon change occurs |

Warning Logs

This hook will display various warning messages if the NODE_ENV environment variable is set to "development". These messages are a helpful reminder in development only, and will not be displayed in production.