usePerformanceObserver
A React Hook that helps to use PerformanceObserver API with ease.
Demo
Try to open DevTools to see the performance observer logs.
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const { observerRef, isSupported, ...controls } = usePerformanceObserver(callback, options)
Callback
PerformanceObserverCallback function that will be called when the observer is triggered.
Options
export type UseWebObserverOptions = {
/**
* Start the observer immediate after calling this function
*
* @defaultValue true
*/
immediate?: boolean
}
interface PerformanceObserverInit {
buffered?: boolean
entryTypes?: string[]
type?: string
}
export type UsePerformanceObserverOptions = UseWebObserverOptions & PerformanceObserverInit
Returns
Retuerns contain Pausable instance that can be paused, resumed.
See Pausable for more details.
export type UseWebObserverReturns<Observer> = Pausable & {
/**
* ref that holds the observer instance
*/
observerRef: React.MutableRefObject<Observer | null>
/**
* Check if the observer is supported in the current environment
*/
isSupported: boolean
}
export type UsePerformanceObserverReturns = UseWebObserverReturns<PerformanceObserver>
