react-responsive
- Version 10.0.0
- Published
- 57.5 kB
- 4 dependencies
- MIT license
Install
npm i react-responsive
yarn add react-responsive
pnpm add react-responsive
Overview
Media queries in react for responsive design
Index
Variables
Functions
Interfaces
Type Aliases
Variables
variable Context
const Context: any;
variable MediaQuery
const MediaQuery: FC<MediaQueryProps>;
Functions
function toQuery
toQuery: (obj: Partial<MediaQueryAllQueryable>) => string;
function useMediaQuery
useMediaQuery: ( settings: MediaQuerySettings, device?: MediaQueryMatchers, onChange?: (_: boolean) => void) => boolean;
Interfaces
interface MediaQueryAllQueryable
interface MediaQueryAllQueryable extends MediaQueryFeatures, MediaQueryTypes {}
interface MediaQueryFeatures
interface MediaQueryFeatures extends MediaQueryMatchers {}
property maxAspectRatio
maxAspectRatio?: string;
property maxColor
maxColor?: number;
property maxColorIndex
maxColorIndex?: number;
property maxDeviceAspectRatio
maxDeviceAspectRatio?: string;
property maxDeviceHeight
maxDeviceHeight?: number | string;
property maxDeviceWidth
maxDeviceWidth?: number | string;
property maxHeight
maxHeight?: number | string;
property maxMonochrome
maxMonochrome?: number;
property maxResolution
maxResolution?: number | string;
property maxWidth
maxWidth?: number | string;
property minAspectRatio
minAspectRatio?: string;
property minColor
minColor?: number;
property minColorIndex
minColorIndex?: number;
property minDeviceAspectRatio
minDeviceAspectRatio?: string;
property minDeviceHeight
minDeviceHeight?: number | string;
property minDeviceWidth
minDeviceWidth?: number | string;
property minHeight
minHeight?: number | string;
property minMonochrome
minMonochrome?: number;
property minResolution
minResolution?: number | string;
property minWidth
minWidth?: number | string;
interface MediaQueryMatchers
interface MediaQueryMatchers {}
property aspectRatio
aspectRatio?: string;
property color
color?: boolean;
property colorIndex
colorIndex?: boolean;
property deviceAspectRatio
deviceAspectRatio?: string;
property deviceHeight
deviceHeight?: number | string;
property deviceWidth
deviceWidth?: number | string;
property height
height?: number | string;
property monochrome
monochrome?: boolean;
property orientation
orientation?: 'portrait' | 'landscape';
property resolution
resolution?: number | string;
property scan
scan?: 'progressive' | 'interlace';
property type
type?: MediaQueryType;
property width
width?: number | string;
interface MediaQueryTypes
interface MediaQueryTypes {}
property all
all?: boolean;
property aural
aural?: boolean;
property braille
braille?: boolean;
property embossed
embossed?: boolean;
property grid
grid?: boolean;
property handheld
handheld?: boolean;
property print
print?: boolean;
property projection
projection?: boolean;
property screen
screen?: boolean;
property tty
tty?: boolean;
property tv
tv?: boolean;
Type Aliases
type MediaQueryType
type MediaQueryType = keyof MediaQueryTypes;
Package Files (6)
Dependencies (4)
Dev Dependencies (31)
- @rollup/plugin-typescript
- @types/chai
- @types/hyphenate-style-name
- @types/jsdom
- @types/match-media-mock
- @types/matchmediaquery
- @types/mocha
- @types/react
- @types/react-dom
- @types/sinon
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- chai
- cross-env
- eslint
- eslint-plugin-compat
- gh-pages
- jsdom
- match-media-mock
- mocha
- prettier
- react
- react-dom
- rollup
- rollup-plugin-node-externals
- should
- sinon
- tslib
- tsx
- typedoc
- typescript
Peer Dependencies (1)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-responsive
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-responsive)
- HTML<a href="https://www.jsdocs.io/package/react-responsive"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 3676 ms. - Missing or incorrect documentation? Open an issue for this package.