responsive-media 1.2.3 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -6
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
/>
|
|
10
10
|
</div>
|
|
11
11
|
|
|
12
|
-
Reactive boolean state from CSS media queries and element dimensions for Vanilla JS, Vue 3, and React
|
|
12
|
+
Reactive boolean state from CSS media queries and element dimensions for Vanilla JS, Vue 3, and React 19+ — AND/OR conditions, container queries, ordered breakpoint helpers, rich subscription API, CSS vars sync, SSR-safe — with no required peer dependencies.
|
|
13
13
|
|
|
14
14
|
---
|
|
15
15
|
|
|
@@ -27,7 +27,7 @@ Reactive boolean state from CSS media queries and element dimensions for Vanilla
|
|
|
27
27
|
- [Utilities](#utilities)
|
|
28
28
|
- [Presets](#presets)
|
|
29
29
|
- [Vue 3 integration](#vue-3-integration)
|
|
30
|
-
- [React
|
|
30
|
+
- [React 19+ integration](#react-19-integration)
|
|
31
31
|
- [TypeScript helpers](#typescript-helpers)
|
|
32
32
|
- [SSR / hydration](#ssr--hydration)
|
|
33
33
|
- [Architecture](#architecture)
|
|
@@ -46,7 +46,7 @@ Reactive boolean state from CSS media queries and element dimensions for Vanilla
|
|
|
46
46
|
- **Ordered breakpoint helpers** — `current`, `isAbove()`, `isBelow()`, `between()` for semantic viewport comparisons; order derived from config key insertion or explicit `order` option
|
|
47
47
|
- **Utilities** — `syncCSSVars` (CSS custom properties), `emitDOMEvents` (DOM CustomEvents), `toSignal` (any signals library — Preact, Angular, SolidJS, Vue), `match` (pick value by first active breakpoint), `subscribeMediaQuery` (raw single query)
|
|
48
48
|
- **Vue 3 adapter** — `useResponsive`, `useBreakpoints`, `useMediaQuery`, `useContainerState`; fully reactive in templates and `computed`; `ResponsivePlugin` for global config
|
|
49
|
-
- **React
|
|
49
|
+
- **React 19+ adapter** — same four hooks; `useSyncExternalStore` for safe concurrent rendering; SSR-safe (`false` on server)
|
|
50
50
|
- **Presets** — `TailwindPreset`, `BootstrapPreset`, `AccessibilityPreset` out of the box; user-preference queries (`dark`, `reducedMotion`, `highContrast`, `print`, …)
|
|
51
51
|
- **SSR-safe** — all APIs check for `window` / `matchMedia` / `ResizeObserver` before use; `hydrate()` prevents layout shift on the client
|
|
52
52
|
- **TypeScript** — full generics; `ConfigToState<T>` infers a boolean-state type from any config object
|
|
@@ -63,7 +63,7 @@ No required peer dependencies. Vue and React adapters are available automaticall
|
|
|
63
63
|
|
|
64
64
|
```bash
|
|
65
65
|
npm install vue@>=3.3 # for Vue composables
|
|
66
|
-
npm install react@>=
|
|
66
|
+
npm install react@>=19 # for React hooks
|
|
67
67
|
```
|
|
68
68
|
|
|
69
69
|
---
|
|
@@ -691,7 +691,7 @@ const cardState = useContainerState(cardRef, {
|
|
|
691
691
|
|
|
692
692
|
---
|
|
693
693
|
|
|
694
|
-
## React
|
|
694
|
+
## React 19+ integration
|
|
695
695
|
|
|
696
696
|
Import from `responsive-media/react`.
|
|
697
697
|
|
|
@@ -904,7 +904,7 @@ responsive-media
|
|
|
904
904
|
| Entry point | Peer deps | Notes |
|
|
905
905
|
|-----------------------------|----------------------|-------|
|
|
906
906
|
| `responsive-media` | *(none required)* | Core + Vue composables (tree-shaken when Vue absent) |
|
|
907
|
-
| `responsive-media/react` | `react ^
|
|
907
|
+
| `responsive-media/react` | `react ^19` | React hooks only |
|
|
908
908
|
| `responsive-media/presets` | *(none)* | Preset configs only — add to any instance |
|
|
909
909
|
| `responsive-media/container`| *(none)* | `ContainerState` class + factory only |
|
|
910
910
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "responsive-media",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"description": "A utility for reactive state based on CSS media queries. Includes integration with Vue 3 (Composition API) and React 18+.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"vue": "^3.5.34"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
|
-
"react": "^
|
|
72
|
+
"react": "^19.0.0",
|
|
73
73
|
"vue": "^3.5.27"
|
|
74
74
|
},
|
|
75
75
|
"peerDependenciesMeta": {
|