• Version 9.0.0-beta.6
  • Published
  • 316 kB
  • 4 dependencies
  • MIT license


npm i react-responsive
yarn add react-responsive
pnpm add react-responsive


Media queries in react for responsive design



variable Context

const Context: React.Context<Partial<MediaQueryAllQueryable>>;

    variable MediaQuery

    const MediaQuery: React.FC<MediaQueryProps>;


      function toQuery

      toQuery: (obj: Partial<MediaQueryAllQueryable>) => string;

        function useMediaQuery

        useMediaQuery: (
        settings: MediaQuerySettings,
        device?: MediaQueryMatchers | undefined,
        onChange?: (_: boolean) => void
        ) => boolean;


          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 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;


                                                                                namespace shallow-equal

                                                                                module 'shallow-equal' {}

                                                                                  function shallowEqualArrays

                                                                                  shallowEqualArrays: (arr1: primitives[], arr2: primitives[]) => boolean;

                                                                                    function shallowEqualObjects

                                                                                    shallowEqualObjects: (
                                                                                    obj1: primitiveObject | undefined,
                                                                                    obj2: primitiveObject | undefined
                                                                                    ) => boolean;

                                                                                      interface primitiveObject

                                                                                      interface primitiveObject {}

                                                                                        index signature

                                                                                        [key: string]: primitives;

                                                                                          type primitives

                                                                                          type primitives = string | number | boolean | bigint | undefined | symbol | null;

                                                                                            Package Files (7)

                                                                                            Dependencies (4)

                                                                                            Dev Dependencies (28)

                                                                                            Peer Dependencies (1)


                                                                                            To add a badge like this badgeto your package's README, use the codes available below.

                                                                                            You may also use to create a custom badge linking to

                                                                                            • Markdown
                                                                                            • HTML
                                                                                              <a href=""><img src="" alt=""></a>