Hooks
entries:updated Hook
On this page
The entries:updated hook is called whenever the collection of head entries is modified, either by adding new entries, updating existing ones, or removing entries. This hook provides a way to react to changes in the application's head content.
Hook Signature
export interface Hook {
'entries:updated': (ctx: Unhead<any>) => HookResult
}
Parameters
| Name | Type | Description |
|---|---|---|
ctx | Unhead<any> | The Unhead instance containing the updated entries |
Returns
HookResult which is either void or Promise<void>
Usage Example
import { createHead } from 'unhead'
const head = createHead({
hooks: {
'entries:updated': (head) => {
// Log when entries are updated
console.log('Head entries have been updated!')
console.log(`Current entry count: ${head.headEntries().length}`)
}
}
})
Use Cases
Tracking Head Changes
You can use this hook to track and log changes to head entries throughout your application lifecycle:
import { defineHeadPlugin } from 'unhead'
export const headChangeTrackingPlugin = defineHeadPlugin({
hooks: {
'entries:updated': (head) => {
// Get current timestamp
const timestamp = new Date().toISOString()
// Log the updated state
console.log(`[${timestamp}] Head entries updated:`, head.headEntries().map(entry => ({
id: entry._i,
input: entry.input
})))
}
}
})
Triggering Side Effects
The hook can be used to trigger side effects when head entries change:
import { defineHeadPlugin } from 'unhead'
export const headChangeReactionPlugin = defineHeadPlugin({
hooks: {
'entries:updated': (head) => {
// Check if title has changed
const titleEntry = head.headEntries().find(entry =>
entry.input && typeof entry.input === 'object' && 'title' in entry.input
)
if (titleEntry) {
// Perform side effect when title changes
notifyTitleChange(titleEntry.input.title)
}
}
}
})
function notifyTitleChange(title) {
// Custom notification logic
console.log(`Title changed to: ${title}`)
}
Did this page help you?