kylefang/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/zhigang1992/DefinitelyTyped.git synced 2026-05-18 12:33:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

react-responsive definition

Browse Source
This commit is contained in:
Alexey Svetliakov
2016-07-06 01:32:09 +02:00
parent 8df97176d2
commit 1b40d9883d
2 changed files with 111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
react-responsive/react-responsive-tests.tsx Normal file
View File

@@ -0,0 +1,45 @@
/// <reference path="../react/react.d.ts" />
/// <reference path="./react-responsive.d.ts" />
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>
)
}
}

66
react-responsive/react-responsive.d.ts vendored Normal file
View File

@@ -0,0 +1,66 @@
// 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
/// <reference path="../react/react.d.ts" />
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;
}