@blocz/react-responsive/lib/react-responsive.d.mts

🔍 <Only /> displays some contents for a specific screen size

import * as React from "react";

//#region src/sanitize.d.ts
type Units = "em" | "ex" | "%" | "px" | "cm" | "mm" | "in" | "pt" | "pc" | "ch" | "rem" | "vh" | "vw" | "vmin" | "vmax";
type Directions = "width" | "height";
type ExposedMediaRange = [number, number] | [number, number, Units] | [number, number, {
  unit?: Units;
  direction?: Directions;
}];
interface ExposedMediaRanges {
  [key: string]: ExposedMediaRange;
}
type MediaRange = [number, number, Units, Directions];
interface MediaRanges {
  [mediaRange: string]: MediaRange;
}
//#endregion
//#region src/MediaRangesContext.d.ts
/**
* @deprecated Use {@link createMediaRanges} instead. `MediaRangesContext` will be removed in
* the next major together with {@link MediaRangesProvider}.
*/
declare const MediaRangesContext: React.Context<MediaRanges>;
interface MediaRangesProviderProps {
  mediaRanges?: ExposedMediaRanges;
  additionalMediaRanges?: ExposedMediaRanges;
}
/** @deprecated Use {@link createMediaRanges} instead. `MediaRangesProvider` will be removed in the next major. */
declare function MediaRangesProvider({
  mediaRanges,
  additionalMediaRanges,
  children
}: React.PropsWithChildren<MediaRangesProviderProps>): React.ReactElement;
/** @deprecated Use {@link MediaRangesContext} instead. */
declare const BreakpointsContext: React.Context<MediaRanges>;
interface BreakpointsProviderProps {
  /** @deprecated Use `mediaRanges` on `MediaRangesProvider` instead. */
  breakpoints?: ExposedMediaRanges;
  /** @deprecated Use `additionalMediaRanges` on `MediaRangesProvider` instead. */
  additionalBreakpoints?: ExposedMediaRanges;
}
/** @deprecated Use {@link MediaRangesProvider} instead. */
declare function BreakpointsProvider({
  breakpoints,
  additionalBreakpoints,
  children
}: React.PropsWithChildren<BreakpointsProviderProps>): React.ReactElement;
//#endregion
//#region src/Only.d.ts
type OnlyProps$1<OtherProps = {
  [prop: string]: never;
}> = OtherProps & {
  matchMedia?: string;
  on?: string;
  as?: string | React.ComponentType<OtherProps>;
};
declare function Only<OtherProps = {
  [prop: string]: never;
}>({
  matchMedia,
  on,
  as,
  children,
  ...props
}: React.PropsWithChildren<OnlyProps$1<OtherProps>>): React.ReactElement | null;
//#endregion
//#region src/useMediaRange.d.ts
declare function useMediaRange(on?: string): boolean;
/** @deprecated Use {@link useMediaRange} instead. */
declare const useBreakpoint: (on?: string) => boolean;
//#endregion
//#region src/useMediaQuery.d.ts
declare function useMediaQuery(mediaQuery: string): boolean;
//#endregion
//#region src/_validateMediaRanges.d.ts
type MediaRangeKey<T extends ExposedMediaRanges> = Extract<keyof T, string>;
type ValidMediaRangeName<T extends ExposedMediaRanges> = MediaRangeKey<T> | `${MediaRangeKey<T>}Up` | `${MediaRangeKey<T>}Down`;
type CollectInvalidMediaRanges<T extends ExposedMediaRanges, S extends string> = S extends `${infer Head} ${infer Tail}` ? Head extends ValidMediaRangeName<T> ? CollectInvalidMediaRanges<T, Tail> : CollectInvalidMediaRanges<T, Tail> extends infer Rest extends string ? Rest extends "" ? Head : `${Head} ${Rest}` : never : S extends "" ? "" : S extends ValidMediaRangeName<T> ? "" : S;
type ValidatedMediaRangeString<T extends ExposedMediaRanges, S extends string> = CollectInvalidMediaRanges<T, S> extends infer Invalid extends string ? Invalid extends "" ? S extends "" ? "Invalid media range: empty string" : S : `Invalid media ranges: ${Invalid}` : never;
//#endregion
//#region src/createMediaRanges.d.ts
interface OnlyProps<T extends ExposedMediaRanges, S extends string> {
  matchMedia?: string;
  on?: ValidatedMediaRangeString<T, S>;
}
interface CustomMediaRanges<T extends ExposedMediaRanges> {
  useMediaRange: <S extends string>(on: ValidatedMediaRangeString<T, S>) => boolean;
  Only: <S extends string>(props: React.PropsWithChildren<OnlyProps<T, S>>) => React.ReactElement | null;
}
declare function createMediaRanges<T extends ExposedMediaRanges>(mediaRanges: T): CustomMediaRanges<T>;
//#endregion
//#region src/defaultMediaRanges.d.ts
declare const DEFAULT_MEDIA_RANGES: {
  xs: ExposedMediaRange;
  sm: ExposedMediaRange;
  md: ExposedMediaRange;
  lg: ExposedMediaRange;
  xl: ExposedMediaRange;
};
//#endregion
export { BreakpointsContext, BreakpointsProvider, DEFAULT_MEDIA_RANGES, MediaRangesContext, MediaRangesProvider, Only, type Units, createMediaRanges, useBreakpoint, useMediaQuery, useMediaRange };
//# sourceMappingURL=react-responsive.d.mts.map