| 1 | import * as React from "react";
|
| 2 |
|
| 3 | export interface MediaQueryTypes {
|
| 4 | all?: boolean | undefined;
|
| 5 | grid?: boolean | undefined;
|
| 6 | aural?: boolean | undefined;
|
| 7 | braille?: boolean | undefined;
|
| 8 | handheld?: boolean | undefined;
|
| 9 | print?: boolean | undefined;
|
| 10 | projection?: boolean | undefined;
|
| 11 | screen?: boolean | undefined;
|
| 12 | tty?: boolean | undefined;
|
| 13 | tv?: boolean | undefined;
|
| 14 | embossed?: boolean | undefined;
|
| 15 | }
|
| 16 |
|
| 17 | export type MediaQueryType = keyof MediaQueryTypes;
|
| 18 |
|
| 19 | export interface MediaQueryMatchers {
|
| 20 | aspectRatio?: string | undefined;
|
| 21 | deviceAspectRatio?: string | undefined;
|
| 22 | height?: number | string | undefined;
|
| 23 | deviceHeight?: number | string | undefined;
|
| 24 | width?: number | string | undefined;
|
| 25 | deviceWidth?: number | string | undefined;
|
| 26 | color?: boolean | undefined;
|
| 27 | colorIndex?: boolean | undefined;
|
| 28 | monochrome?: boolean | undefined;
|
| 29 | resolution?: number | string | undefined;
|
| 30 | orientation?: "portrait" | "landscape" | undefined;
|
| 31 | scan?: "progressive" | "interlace" | undefined;
|
| 32 | type?: MediaQueryType | undefined;
|
| 33 | }
|
| 34 |
|
| 35 | export interface MediaQueryFeatures extends MediaQueryMatchers {
|
| 36 | minAspectRatio?: string | undefined;
|
| 37 | maxAspectRatio?: string | undefined;
|
| 38 |
|
| 39 | minDeviceAspectRatio?: string | undefined;
|
| 40 | maxDeviceAspectRatio?: string | undefined;
|
| 41 |
|
| 42 | minHeight?: number | string | undefined;
|
| 43 | maxHeight?: number | string | undefined;
|
| 44 |
|
| 45 | minDeviceHeight?: number | string | undefined;
|
| 46 | maxDeviceHeight?: number | string | undefined;
|
| 47 |
|
| 48 | minWidth?: number | string | undefined;
|
| 49 | maxWidth?: number | string | undefined;
|
| 50 |
|
| 51 | minDeviceWidth?: number | string | undefined;
|
| 52 | maxDeviceWidth?: number | string | undefined;
|
| 53 |
|
| 54 | minColor?: number | undefined;
|
| 55 | maxColor?: number | undefined;
|
| 56 |
|
| 57 | minColorIndex?: number | undefined;
|
| 58 | maxColorIndex?: number | undefined;
|
| 59 |
|
| 60 | minMonochrome?: number | undefined;
|
| 61 | maxMonochrome?: number | undefined;
|
| 62 |
|
| 63 | minResolution?: number | string | undefined;
|
| 64 | maxResolution?: number | string | undefined;
|
| 65 | }
|
| 66 |
|
| 67 | export interface MediaQueryAllQueryable extends MediaQueryFeatures, MediaQueryTypes {}
|
| 68 |
|
| 69 | export interface MediaQueryProps extends MediaQueryAllQueryable {
|
| 70 | component?: React.ElementType | undefined;
|
| 71 | query?: string | undefined;
|
| 72 | style?: React.CSSProperties | undefined;
|
| 73 | className?: string | undefined;
|
| 74 | children?: React.ReactNode | ((matches: boolean) => React.ReactNode) | undefined;
|
| 75 | device?: MediaQueryMatchers | undefined;
|
| 76 | values?: Partial<MediaQueryMatchers> | undefined;
|
| 77 | onBeforeChange?: ((matches: boolean) => void) | undefined;
|
| 78 | onChange?: ((matches: boolean) => void) | undefined;
|
| 79 | }
|
| 80 |
|
| 81 | declare class MediaQuery extends React.Component<MediaQueryProps> {}
|
| 82 | export function toQuery(matchers: Partial<MediaQueryAllQueryable>): string;
|
| 83 |
|
| 84 | export const Context: React.Context<Partial<MediaQueryAllQueryable>>;
|
| 85 |
|
| 86 | export function useMediaQuery(
|
| 87 | settings: Partial<MediaQueryAllQueryable & { query?: string | undefined }>,
|
| 88 | device?: MediaQueryMatchers,
|
| 89 | callback?: (matches: boolean) => void,
|
| 90 | ): boolean;
|
| 91 |
|
| 92 | export default MediaQuery;
|
| 93 | |
| \ | No newline at end of file |