https://github.com/noahflk/react-breakout

Lightweight hook for responsive breakpoints in React components
https://github.com/noahflk/react-breakout

hook media-queries react react-hooks responsive viewport

Last synced: 3 months ago
JSON representation

Lightweight hook for responsive breakpoints in React components

• Host: GitHub
• URL: https://github.com/noahflk/react-breakout
• Owner: noahflk
• License: mit
• Created: 2022-04-20T19:40:15.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-21T02:12:08.000Z (3 months ago)
• Last Synced: 2024-10-21T05:29:52.756Z (3 months ago)
• Topics: hook, media-queries, react, react-hooks, responsive, viewport
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-breakout
• Size: 43.9 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  React Breakout





  Lightweight hook for responsive breakpoints in your React components





  

  



---

## Installation

### NPM

```

npm install react-breakout

```

### Yarn

```

yarn add react-breakout

```

## Usage

The `useBreakpoint` hook returns `true` when the window width is higher than the selected width.

```jsx

import { useBreakpoint } from "react-breakout";

const App = () => {

  const isDesktop = useBreakpoint("md");

  return (

    


      
{isDesktop ? "Yes" : "No"}

    

  );

};

```


The `useBreakpoint` hook accepts either a number as the pixel width threshold or on of the following predefined breakpoints:

```js

const breakpoints = {

  sm: 640,

  md: 768,

  lg: 1024,

  xl: 1280,

};

```

## API

### useBreakpoint

```js

const isAboveThreshold = useBreakpoint("lg");

// OR

const isAboveThreshold = useBreakpoint(1024);

```

#### Returns

- `isAboveThreshold: boolean`

  - True if the window width is above the selected width

#### Arguments

- `breakpoint: "sm" | "md" | "lg" | "xl" | number`

  - Threshold for window size breakpoint