⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	3
📊 Variables & Constants	3
📐 Interfaces	1

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useFps/index.ts

📦 Imports

Name	Source
ShallowRef	vue
shallowRef	vue
useRafFn	../useRafFn

---

Variables & Constants

Name	Type	Kind	Value	Exported
every	number	const	options?.every ?? 10	✗
ticks	number	let/var	0	✗
diff	number	const	now - last	✗

---

Functions

useFps(options: UseFpsOptions): ShallowRef<number>

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
}

• Parameters:
• options: UseFpsOptions
• Return Type: ShallowRef<number>
• Calls:
• shallowRef (from vue)
• performance.now
• useRafFn (from ../useRafFn)
• Math.round

---

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	✓

---