useResponsive

a Hook for getting responsive info.

Examples ​

Get responsive info in components ​

Please change the width of the browser window to see the effect:

small ✔

middle ✔

large ✔

Get responsive info in components

By calling useResponsive in components, you can retrieve the responsive infomation of the browser page and subscribe to it at the same time.

API ​

interface ResponsiveConfig {  [key: string]: number;}interface ResponsiveInfo {  [key: string]: boolean;}function configResponsive(config: ResponsiveConfig): void;function useResponsive(): Accessor<ResponsiveInfo>;
interface ResponsiveConfig {  [key: string]: number;}interface ResponsiveInfo {  [key: string]: boolean;}function configResponsive(config: ResponsiveConfig): void;function useResponsive(): Accessor<ResponsiveInfo>;

Config ​

The default config is the same as bootstrap:

{  'xs': 0,  'sm': 576,  'md': 768,  'lg': 992,  'xl': 1200,}
{  'xs': 0,  'sm': 576,  'md': 768,  'lg': 992,  'xl': 1200,}

If you want to config your own responsive breakpoints, you can use configResponsive:

(Caution: You only need to config it once. Don't call this config function repeatedly.)

configResponsive({  small: 0,  middle: 800,  large: 1200,});
configResponsive({  small: 0,  middle: 800,  large: 1200,});