Logo for jsDocs.io

react-responsive

  • Version 10.0.1
  • Published
  • 56.6 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 (32)

                                                                                                            Peer Dependencies (1)

                                                                                                            Badge

                                                                                                            To add a badge like this onejsDocs.io badgeto 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>