@improv/react-responsive v0.10.1

@improv/react-responsive

Tiny react bindings for @improv/responsive.

Try it on codesandbox.io.

Getting Started

import { useResponsiveWidth } from "@improv/react-responsive";

export function MyComponent(): JSX.Element | null {
  // True if the viewport is at least the width of a common tablet.
  const isTablet = useResponsiveWidth(ResponsiveWidth.Tablet);

  return isTablet ?  <div className={className}>I'm on a tablet! Or, maybe something bigger.</div> : null;
}

API

Includes the @improv/responsive API.

Hooks

• useMediaQuery(query)
  • Returns true if the media query matches.
  • This hook supports all CSS media queries.
• useResponsiveWidth(minWidth)
  • Returns true if the min-width is met.
  • This hook is a wrapper for useMediaQuery(`(min-width: ${minWidth}px)`).