Typed breakpoints, container queries, fluid typography, and user preference hooks. One API across 8 frameworks. Zero runtime deps.
npm install reflow
Define breakpoints once. Get typed keys, active detection, above/below/between checks. Mobile-first.
Track element size with ResizeObserver. React, Vue, Svelte, Solid adapters included.
Generate clamp() values from min/max px and viewport bounds. No magic numbers.
Detect color scheme, reduced motion, contrast, forced colors, pointer type. All reactive.
Server snapshot support. No hydration mismatch warnings. No typeof window checks.
Pass an object keyed by breakpoint, get the matching value back. Works in any framework.
| Framework | Entry | Status |
|---|---|---|
| React | reflow/react | Full hooks + components |
| Vue 3 | reflow/vue | Composables + plugin |
| Svelte 5 | reflow/svelte | Stores |
| Solid | reflow/solid | Core + responsive hooks |
| Qwik | reflow/qwik | Core functions |
| Preact | reflow/preact | React-compatible |
| Angular | reflow/angular | Core functions |
| Lit | reflow/lit | Core functions |
import { ResponsiveProvider, useBreakpoint, useResponsiveValue } from "reflow/react"; import { fluidClamp } from "reflow/styles"; function App() { const bp = useBreakpoint(); const cols = useResponsiveValue({ xs: 1, md: 2, xl: 4 }); return ( <main style={{ fontSize: fluidClamp({ minPx: 16, maxPx: 22 }) }}> <p>Breakpoint: {bp.active}</p> <Grid columns={cols} /> </main> ); } export default () => ( <ResponsiveProvider serverWidth={1024}> <App /> </ResponsiveProvider> );
Reflow gives you more than media queries: container queries, fluid typography, user preferences, and SSR helpers. Works in 8 frameworks, not just React.
Reflow is a focused responsive toolkit, not a grab bag. Every API is typed, SSR-safe, and framework-agnostic. Zero deps means zero conflicts.
Full comparison: reflow vs react-responsive vs @vueuse/core vs usehooks-ts