@primer/react/dist/hooks/useResponsiveValue.d.ts

An implementation of GitHub's Primer Design System using React

//#region src/hooks/useResponsiveValue.d.ts
type ResponsiveValue<TRegular, TNarrow = TRegular, TWide = TRegular> = {
  narrow?: TNarrow;
  regular?: TRegular;
  wide?: TWide;
};
/**
 * Flattens all possible value types into single union type
 * For example, if `T` is `'none' | 'line' | Responsive<'none' | 'line' | 'filled'>`,
 * `FlattenResponsiveValue<T>` will be `'none' | 'line' | 'filled'`
 */
type FlattenResponsiveValue<T> = (T extends ResponsiveValue<infer TRegular, infer TNarrow, infer TWide> ? TRegular | TNarrow | TWide : never) | Exclude<T, ResponsiveValue<any>>;
/**
 * Resolves responsive values based on the current viewport width.
 * For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
 *
 * @deprecated Prefer responsive data attributes with `getResponsiveAttributes` and CSS media queries instead.
 *
 * @example
 * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
 * console.log(value) // 'bar'
 */
declare function useResponsiveValue<T, F>(value: T, fallback: F): FlattenResponsiveValue<T> | F;
//#endregion
export { FlattenResponsiveValue, ResponsiveValue, useResponsiveValue };