⬅️ Back to Table of Contents

📄 useFps

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	3
📐 Interfaces	1

📚 Table of Contents

• Imports
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useFps/index.ts

📦 Imports

Name	Source
ShallowRef	vue
shallowRef	vue
useRafFn	../useRafFn

---

Functions

useFps(options: UseFpsOptions): ShallowRef<number>

Parameters:

• options UseFpsOptions

Returns: ShallowRef<number>

Calls:

• shallowRef (from vue)
• performance.now
• useRafFn (from ../useRafFn)
• Math.round

Code

export function useFps(options?: UseFpsOptions): ShallowRef<number> {
  const fps = shallowRef(0)
  if (typeof performance === 'undefined')
    return fps
  const every = options?.every ?? 10

  let last = performance.now()
  let ticks = 0

  useRafFn(() => {
    ticks += 1
    if (ticks >= every) {
      const now = performance.now()
      const diff = now - last
      fps.value = Math.round(1000 / (diff / ticks))
      last = now
      ticks = 0
    }
  })

  return fps
}

---

Interfaces

UseFpsOptions

Interface Code

export interface UseFpsOptions {
  /**
   * Calculate the FPS on every x frames.
   * @default 10
   */
  every?: number
}

Properties

Name	Type	Optional	Description
every	number	✓	not shown

---

Generated by Syntax Scribe