React hook for changing document.title
yarn add @teneff/use-title-effect
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>
);
}
Version 1.0.0 does not revert the original title of the page once the component is unmounted
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
Time in milliseconds to switch between the different messages resulted from the formatter
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]
}
});