@andideve/react-hooks-responsive v1.0.1

react-hooks-responsive

A React hook for getting the current responsive media breakpoint

Installation

npm i @andideve/react-hooks-responsive

Usage

Getting current breakpoint

import { useBreakpoints } from '@andideve/react-hooks-responsive';

const BREAKPOINTS = [576, 768, 992, 1200];

function App() {
  const { current, inBreakpoint, viewportWidth } = useBreakpoints({
    breakpoints: BREAKPOINTS,
    revalidateMs: 300, // by default is 300 (ms)
  });

  // viewportWidth < 576 will be true
  if (inBreakpoint(0)) {
    return <main>{/* mobile content */}</main>;
  }
  return <main>{/* default content */}</main>;
}

or client device

import { useDevice } from '@andideve/react-hooks-responsive';

function App() {
  // tested on chrome devices simulator
  const { isDesktop, isTablet, isMobile, deviceType } = useDevice({
    revalidateMs: 300, // by default is 300 (ms)
  });

  if (isMobile) {
    return <main>{/* mobile content */}</main>;
  }
  return <main>{/* default content */}</main>;
}

MIT License