responsive-detect

📱 A tiny utility to detect responsive breakpoints in any modern JavaScript framework (React, Vue, Svelte, etc.).

---

Table of Contents

• 📦 Installation
• 🛠️ Usage
  • React
  • Vue 3 (Composition API)
  • Svelte
• 🔧 Examples
• ⚙️ API
• 📄 License

---

📦 Installation

1npm install responsive-detect

or

1yarn add responsive-detect

---

🛠️ Usage

React

1import { useBreakpoint } from 'responsive-detect'
2
3const breakpoints = {
4  mobile: 0,
5  tablet: 768,
6  desktop: 1024
7}
8
9export default function App() {
10  const current = useBreakpoint(breakpoints)
11
12  return (
13    <div>
14      <h1>Current: {current}</h1>
15    </div>
16  )
17}

---

Vue 3 (Composition API)

1<script setup lang="ts">
2import { useBreakpoint } from 'responsive-detect'
3
4const breakpoints = {
5  mobile: 0,
6  tablet: 768,
7  desktop: 1024
8}
9
10const current = useBreakpoint(breakpoints)
11</script>
12
13<template>
14  <div>Current: {{ current }}</div>
15</template>

---

Svelte

1<script lang="ts">
2  import { useBreakpoint } from 'responsive-detect'
3
4  const breakpoints = {
5    mobile: 0,
6    tablet: 768,
7    desktop: 1024
8  }
9
10  const current = useBreakpoint(breakpoints)
11</script>
12
13<h1>Current: {$current}</h1>

---

🔧 Examples

Here are example projects demonstrating the usage of responsive-detect in different frameworks:

• React Example
• Vue 3 Example
• Svelte Example

You can clone the examples or add the responsive-detect package to your existing project to test responsiveness.

---

⚙️ API

useBreakpoint(breakpoints)

A lightweight utility hook that returns the current active breakpoint.

Parameters

Name	Type	Description
breakpoints	Record<string, number>	Object with named breakpoints in pixels

Returns

A reactive value with the current breakpoint label (e.g., "mobile", "tablet", "desktop").

---

📄 License

MIT © 2025 Santosh Shebannavar