Updated react-responsive types to v3.0 - also addresses issue https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20656

types/react-responsive/index.d.ts

@@ -1,65 +1,90 @@
-// Type definitions for react-responsive 1.1.3
+// Type definitions for react-responsive 3.0
 // Project: https://github.com/contra/react-responsive
 // Definitions by: Alexey Svetliakov <https://github.com/asvetliakov>
+//                 Alec Hill <https://github.com/alechill>
+//                 Javier Gonzalez <https://github.com/xaviergonz>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
+// TypeScript Version: 2.4
 
-declare module "react-responsive" {
-    import * as React from "react";
-
-    namespace MediaQuery {
-        export interface MediaQueryProps {
-            query?: string;
-            // matchers
-            orientation?: "portrait" | "landscape";
-            scan?: "progressive" | "interlace";
-            aspectRatio?: string;
-            deviceAspectRatio?: string;
-            height?: number | string;
-            deviceHeight?: number | string;
-            width?: number | string;
-            deviceWidth?: number | string;
-            color?: boolean;
-            colorIndex?: boolean;
-            monochrome?: boolean;
-            resolution?: number | string;
-            // types
-            minAspectRatio?: string;
-            maxAspectRatio?: string;
-            minDeviceAspectRatio?: string;
-            maxDeviceAspectRatio?: string;
-            minHeight?: number | string;
-            maxHeight?: number | string;
-            minDeviceHeight?: number | string;
-            maxDeviceHeight?: number | string;
-            minDeviceWidth?: number | string;
-            maxDeviceWidth?: number | string;
-            minWidth?: number | string;
-            maxWidth?: number | string;
-            minColor?: number;
-            maxColor?: number;
-            minColorIndex?: number;
-            maxColorIndex?: number;
-            minMonochrome?: number;
-            maxMonochrome?: number;
-            minResolution?: number | string;
-            maxResolution?: number | string;
-            // types
-            all?: boolean;
-            grid?: boolean;
-            aural?: boolean;
-            braille?: boolean;
-            handheld?: boolean;
-            print?: boolean;
-            projection?: boolean;
-            screen?: boolean;
-            tty?: boolean;
-            tv?: boolean;
-            embossed?: boolean;
-        }
-    }
-
-    class MediaQuery extends React.Component<MediaQuery.MediaQueryProps, any> { }
-    export = MediaQuery;
+import * as React from "react";
 
+export interface MediaQueryTypes {
+    all?: boolean;
+    grid?: boolean;
+    aural?: boolean;
+    braille?: boolean;
+    handheld?: boolean;
+    print?: boolean;
+    projection?: boolean;
+    screen?: boolean;
+    tty?: boolean;
+    tv?: boolean;
+    embossed?: boolean;
 }
+
+export type MediaQueryType = keyof MediaQueryTypes;
+
+export interface MediaQueryMatchers {
+    aspectRatio?: string;
+    deviceAspectRatio?: string;
+    height?: number | string;
+    deviceHeight?: number | string;
+    width?: number | string;
+    deviceWidth?: number | string;
+    color?: boolean;
+    colorIndex?: boolean;
+    monochrome?: boolean;
+    resolution?: number | string;
+    orientation?: 'portrait' | 'landscape';
+    scan?: 'progressive' | 'interlace';
+    type?: MediaQueryType;
+}
+
+export interface MediaQueryFeatures extends MediaQueryMatchers {
+    minAspectRatio?: string;
+    maxAspectRatio?: string;
+
+    minDeviceAspectRatio?: string;
+    maxDeviceAspectRatio?: string;
+
+    minHeight?: number | string;
+    maxHeight?: number | string;
+
+    minDeviceHeight?: number | string;
+    maxDeviceHeight?: number | string;
+
+    minWidth?: number | string;
+    maxWidth?: number | string;
+
+    minDeviceWidth?: number | string;
+    maxDeviceWidth?: number | string;
+
+    minColor?: number;
+    maxColor?: number;
+
+    minColorIndex?: number;
+    maxColorIndex?: number;
+
+    minMonochrome?: number;
+    maxMonochrome?: number;
+
+    minResolution?: number | string;
+    maxResolution?: number | string;
+}
+
+export interface MediaQueryAllQueryable extends MediaQueryFeatures, MediaQueryTypes {}
+
+export interface MediaQueryProps extends MediaQueryAllQueryable {
+    component?: string | React.SFC<any> | React.ClassType<any, any, any> | React.ComponentClass<any>;
+    query?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    children?: React.ReactNode | ((matches: boolean) => React.ReactNode);
+    values?: Partial<MediaQueryMatchers>;
+    onBeforeChange?: (matches: boolean) => void;
+    onChange?: (matches: boolean) => void;
+}
+
+declare class MediaQuery extends React.Component<MediaQueryProps> { }
+export function toQuery(matchers: Partial<MediaQueryAllQueryable>): string;
+export default MediaQuery;

types/react-responsive/react-responsive-tests.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
-import * as MediaQuery from "react-responsive";
+import MediaQuery, {
+    toQuery
+} from "react-responsive";
 
-class Test extends React.Component {
+class QueryTests extends React.Component {
     render() {
         return (
             <div>
@@ -37,6 +39,99 @@ class Test extends React.Component {
                     </MediaQuery>
                 </MediaQuery>
             </div>
-        )
+        );
     }
 }
+
+const ChildrenPropTest: React.SFC = ({ children }) => <MediaQuery minWidth={992} children={children} />;
+
+class PropsTests extends React.Component {
+    render() {
+        return (
+            <div>
+                <MediaQuery minDeviceWidth={700} component="ul">
+                    <li>Item 1</li>
+                    <li>Item 2</li>
+                </MediaQuery>
+                <MediaQuery minDeviceWidth={700} component={ChildrenPropTest}>
+                    <li>Item 1</li>
+                    <li>Item 2</li>
+                </MediaQuery>
+                <MediaQuery minDeviceWidth={700} component={QueryTests}>
+                    <li>Item 1</li>
+                    <li>Item 2</li>
+                </MediaQuery>
+                <MediaQuery minDeviceWidth={1200} className="some-class">
+                    <div>Wrapped</div>
+                    <div>Content</div>
+                </MediaQuery>
+                <MediaQuery style={{textTransform: 'uppercase'}} all={true}>
+                    uppercase me!
+                </MediaQuery>
+                <MediaQuery minDeviceWidth={1224}
+                            values={{ aspectRatio: '4/3',
+                                      deviceAspectRatio: '4/3',
+                                      height: '1600px',
+                                      deviceHeight: 1600,
+                                      width: 1600,
+                                      deviceWidth: '1600px',
+                                      color: true,
+                                      colorIndex: true,
+                                      monochrome: false,
+                                      resolution: 1,
+                                      orientation: 'portrait',
+                                      scan: 'progressive',
+                                      type: 'print'
+                                    }}>
+                    Values supplied for SSR
+                </MediaQuery>
+            </div>
+        );
+    }
+}
+
+class FunctionChildrenTest extends React.Component {
+    render() {
+        return (
+            <MediaQuery minDeviceWidth={700}>
+                {(matches: boolean) => {
+                    if (matches) {
+                        return <div>Media query matches!</div>;
+                    } else {
+                        return <div>Media query does not match!</div>;
+                    }
+                }}
+            </MediaQuery>
+        );
+    }
+}
+
+class CallbackTest extends React.Component {
+    onBeforeChange = (matches: boolean): void => {
+        if (matches) {
+            // do something
+        }
+    }
+
+    onChange = (matches: boolean): void => {
+        if (matches) {
+            // do something else
+        }
+    }
+
+    render() {
+        return (
+            <MediaQuery minDeviceWidth={700}
+                        onBeforeChange={this.onBeforeChange}
+                        onChange={this.onChange}>
+                Media query matches!
+            </MediaQuery>
+        );
+    }
+}
+
+const queryStrTest: string = toQuery({
+    type: 'print',
+    screen: true,
+    minHeight: 666
+});

types/react-responsive/tsconfig.json

@@ -2,12 +2,11 @@
     "compilerOptions": {
         "module": "commonjs",
         "lib": [
-            "es6",
-            "dom"
+            "es6"
         ],
         "noImplicitAny": true,
         "noImplicitThis": true,
-        "strictNullChecks": false,
+        "strictNullChecks": true,
         "strictFunctionTypes": true,
         "baseUrl": "../",
         "typeRoots": [
@@ -22,4 +21,4 @@
         "index.d.ts",
         "react-responsive-tests.tsx"
     ]
-}
+}

types/react-responsive/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "dtslint/dt.json"
+}

types/react-responsive/v1/index.d.ts

@@ -0,0 +1,65 @@
+// Type definitions for react-responsive 1.1.3
+// Project: https://github.com/contra/react-responsive
+// Definitions by: Alexey Svetliakov <https://github.com/asvetliakov>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+declare module "react-responsive" {
+    import * as React from "react";
+
+    namespace MediaQuery {
+        export interface MediaQueryProps {
+            query?: string;
+            // matchers
+            orientation?: "portrait" | "landscape";
+            scan?: "progressive" | "interlace";
+            aspectRatio?: string;
+            deviceAspectRatio?: string;
+            height?: number | string;
+            deviceHeight?: number | string;
+            width?: number | string;
+            deviceWidth?: number | string;
+            color?: boolean;
+            colorIndex?: boolean;
+            monochrome?: boolean;
+            resolution?: number | string;
+            // types
+            minAspectRatio?: string;
+            maxAspectRatio?: string;
+            minDeviceAspectRatio?: string;
+            maxDeviceAspectRatio?: string;
+            minHeight?: number | string;
+            maxHeight?: number | string;
+            minDeviceHeight?: number | string;
+            maxDeviceHeight?: number | string;
+            minDeviceWidth?: number | string;
+            maxDeviceWidth?: number | string;
+            minWidth?: number | string;
+            maxWidth?: number | string;
+            minColor?: number;
+            maxColor?: number;
+            minColorIndex?: number;
+            maxColorIndex?: number;
+            minMonochrome?: number;
+            maxMonochrome?: number;
+            minResolution?: number | string;
+            maxResolution?: number | string;
+            // types
+            all?: boolean;
+            grid?: boolean;
+            aural?: boolean;
+            braille?: boolean;
+            handheld?: boolean;
+            print?: boolean;
+            projection?: boolean;
+            screen?: boolean;
+            tty?: boolean;
+            tv?: boolean;
+            embossed?: boolean;
+        }
+    }
+
+    class MediaQuery extends React.Component<MediaQuery.MediaQueryProps, any> { }
+    export = MediaQuery;
+
+}

types/react-responsive/v1/react-responsive-tests.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import * as MediaQuery from "react-responsive";
+
+class Test extends React.Component {
+    render() {
+        return (
+            <div>
+                <div>Device Test!</div>
+                <MediaQuery minDeviceWidth={1224}>
+                    <div>You are a desktop or laptop</div>
+                    <MediaQuery minDeviceWidth={1824}>
+                        <div>You also have a huge screen</div>
+                    </MediaQuery>
+                    <MediaQuery maxWidth={1224}>
+                        <div>You are sized like a tablet or mobile phone though</div>
+                    </MediaQuery>
+                </MediaQuery>
+                <MediaQuery maxDeviceWidth={1224}>
+                    <div>You are a tablet or mobile phone</div>
+                </MediaQuery>
+                <MediaQuery orientation="portrait">
+                    <div>You are portrait</div>
+                </MediaQuery>
+                <MediaQuery orientation="landscape">
+                    <div>You are landscape</div>
+                </MediaQuery>
+                <MediaQuery minResolution="2dppx">
+                    <div>You are retina</div>
+                </MediaQuery>
+                <MediaQuery query="(min-device-width: 1224px)">
+                    <div>You are a desktop or laptop</div>
+                    <MediaQuery query="(min-device-width: 1824px)">
+                        <div>You also have a huge screen</div>
+                    </MediaQuery>
+                    <MediaQuery query="(max-width: 1224px)">
+                        <div>You are sized like a tablet or mobile phone though</div>
+                    </MediaQuery>
+                </MediaQuery>
+            </div>
+        )
+    }
+}

types/react-responsive/v1/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": false,
+        "strictFunctionTypes": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "types": [],
+        "paths": {
+            "react-responsive": [
+                "react-responsive/v1"
+            ],
+            "react-responsive/*": [
+                "react-responsive/v1/*"
+            ]
+        },
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "react-responsive-tests.tsx"
+    ]
+}