https://github.com/shebannavar/responsive-detect
A tiny utility to detect responsive breakpoints in any modern JavaScript framework (React, Vue, Svelte, etc.).
https://github.com/shebannavar/responsive-detect
breakpoints hooks react svelte utility vue
Last synced: about 2 months ago
JSON representation
A tiny utility to detect responsive breakpoints in any modern JavaScript framework (React, Vue, Svelte, etc.).
- Host: GitHub
- URL: https://github.com/shebannavar/responsive-detect
- Owner: shebannavar
- Created: 2025-04-14T08:07:32.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-14T13:23:21.000Z (about 1 year ago)
- Last Synced: 2025-10-06T17:33:54.325Z (9 months ago)
- Topics: breakpoints, hooks, react, svelte, utility, vue
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/responsive-detect
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# responsive-detect
📱 A tiny utility to detect responsive breakpoints in any modern JavaScript framework (React, Vue, Svelte, etc.).
---
## Table of Contents
- [📦 Installation](#-installation)
- [🛠️ Usage](#️-usage)
- [React](#react)
- [Vue 3 (Composition API)](#vue-3-composition-api)
- [Svelte](#svelte)
- [🔧 Examples](#examples)
- [⚙️ API](#️-api)
- [📄 License](#-license)
---
## 📦 Installation
```bash
npm install responsive-detect
```
or
```bash
yarn add responsive-detect
```
---
## 🛠️ Usage
### React
```tsx
import { useBreakpoint } from 'responsive-detect'
const breakpoints = {
mobile: 0,
tablet: 768,
desktop: 1024
}
export default function App() {
const current = useBreakpoint(breakpoints)
return (
Current: {current}
)
}
```
---
### Vue 3 (Composition API)
```ts
import { useBreakpoint } from 'responsive-detect'
const breakpoints = {
mobile: 0,
tablet: 768,
desktop: 1024
}
const current = useBreakpoint(breakpoints)
Current: {{ current }}
```
---
### Svelte
```svelte
import { useBreakpoint } from 'responsive-detect'
const breakpoints = {
mobile: 0,
tablet: 768,
desktop: 1024
}
const current = useBreakpoint(breakpoints)
Current: {$current}
```
---
## 🔧 Examples
Here are example projects demonstrating the usage of `responsive-detect` in different frameworks:
- **[React Example](https://github.com/shebannavar/responsive-detect/blob/master/examples/react-example.jsx)**
- **[Vue 3 Example](https://github.com/shebannavar/responsive-detect/blob/master/examples/vue3-example.vue)**
- **[Svelte Example](https://github.com/shebannavar/responsive-detect/blob/master/examples/svelte-example.svelte)**
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` | 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