breakpoint-hooks
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

Breakpoint-hooks

Installation

npm i breakpoint-hooks
pnpm add breakpoint-hooks
yarn add breakpoint-hooks

Usage

Import the hook

import { useIsMobile } from "breakpoint-hooks";

Call the hook within your client side functional component and use it to conditionally render some content

// "use client" Next/React 19+ users only <----
export default function myFunctionalComponent() {
  const isMobile = useIsMobile();

  return (
    <>
      <h1>Greatest website</h1>
      //Some mobile only stuff
      {isMobile && (
        <p>
          Only mobile users can read this cool paragraph
        </p>
        )}
    </h1>
  )
}

Note that in next.js 14+ OR React 19, you will need to use this in a client component so use the use client directive at the top of your component

Available hooks

useIsMobile
useIsTablet

Readme

Keywords

Package Sidebar

Install

npm i breakpoint-hooks

Weekly Downloads

3

Version

1.0.2

License

ISC

Unpacked Size

5.01 kB

Total Files

13

Last publish

Collaborators

  • aidan_l