@teneff/use-title-effect

React hook for changing document.title

Installation

yarn add @teneff/use-title-effect

Preview

Usage

import useTitleEffect from '@teneff/use-title-effect'

function App() {

  useTitleEffect('React App Title', {
    messages: ['message 1', 'message 2']
  });

  return (
    <div className="App">
     React App Here
    </div>
  );
}

ℹ️ Consider using the hook in the outer components like App

Version 1.0.0 does not revert the original title of the page once the component is unmounted

Options

options.title: string (default: "")

Title is used to provide a permanent page title and it's also provided to the formatter to be enchanced

options.formatter: Formatter<T> (default: see formatter/message)

Formatter is functino accepting object with title and messages and returning array of strings, which are rotated in the given duration

options.duration: number (default: 800)

Time in milliseconds to switch between the different messages resulted from the formatter

Usage with custom message format

  import formatters, { Formatter } from './formatter';

  const messages = [
    {
      message: 'Hello!',
      author: {
        name: 'John Doe'
      }
    },
    {
      message: 'Hey!',
      author: {
        name: 'Jane Doe'
      }
    },
    {
      message: 'U there?',
      author: {
        name: 'John Doe'
      }
    },
  ]

  useTitleEffect(
    "My awesome app",
    {
      messages,
      // reusing the default formatter
      formatter: ({ title, messages }) => formatters.message({
      title,
      messages: messages.map(message => message.author.name)
    })
  })

  useTitleEffect(
    "My awesome app",
    {
      messages,
      // custom formatter
      formatter: ({ title, messages }) => {
        const uniqueAuthors = new Set(messages.map(message => message.author.name))
        return messages.length ? [
          `(${messages.length}) ${title}`,
          `(${messages.length}) You've got messages from ${Array.from(uniqueAuthors).length} contacts`
        ] : [title]
      }
    });