@patreon/studio/module/hooks/useCurrentResponsiveValue/index.d.ts

Patreon Studio Design System

import type { OpaqueResponsive } from '../../utilities/opaque-responsive';
/** the pending result is what we return before the responsive value can be determined from the window */
interface PendingResponsiveValueResult {
    state: 'pending';
}
/** the available result is what we return once the responsive value can be determined from the window */
interface AvailableResponsiveValueResult<T> {
    state: 'available';
    value: T;
}
/** the result is either the pending result or the available result */
declare type CurrentResponsiveValueResult<T> = PendingResponsiveValueResult | AvailableResponsiveValueResult<T>;
/**
 * This helper returns true if the current responsive value result is available
 */
export declare function isResponsiveValueAvailable<T>(result: CurrentResponsiveValueResult<T>): result is AvailableResponsiveValueResult<T>;
/**
 * This hook returns the current responsive value for a OpaqueResponsive
 * object when it is available.
 *
 * It will return a tagged object with a state of "inital" until the
 * value is hydrated on the client. Once the value is hydrated, the
 * hook will return the current responsive value with a state of "available".
 *
 * @warning `useCurrentReponsiveValue` is for working with OpaqueResponsive objects,
 * try `useCurrentBreakpoint` if you are simply after the current screen size.
 */
export declare function useCurrentResponsiveValue<T>(values: OpaqueResponsive<T>): CurrentResponsiveValueResult<T>;
export {};