useResponsive

Overview

React Hook for getting responsive info.

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useResponsive.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useResponsive.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useResponsive.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useResponsive.json

React Hook for getting responsive info.

Examples

Get responsive info in components

API

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

Config

The default config is the same as bootstrap:

{
  '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,
});