@blocz/react-responsive
Version:
🔍 <Only /> displays some contents for a specific screen size
102 lines (101 loc) • 4.49 kB
text/typescript
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.cts.map