TypeScript
Hooks

entries:updated Hook

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

NameTypeDescription
ctxUnhead<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?