reflow

8 frameworks. same API. no SSR breakage.

every responsive design library is the same 15 lines copied into a different package name. reflow is those 15 lines, written once, tested across 8 frameworks, and it doesn't break your server.

react, vue, svelte, solid, qwik, preact, angular, vanilla. same hook. same output. no typeof window checks sprinkled in your components. no hydration mismatch warnings at 2am.

npm install usereflow

why

responsive design is a solved problem that nobody solved.

you need breakpoints. you need container queries. you need fluid typography. you need to know if the user prefers dark mode or reduced motion. every framework has its own way to do this. every way is different. every way breaks on the server.

reflow does it one way. useResponsiveImage returns the right srcset for the current viewport. useBreakpoint tells you where you are. usePrefersDark knows what the user wants. same function name in every framework. same output. no surprises.

frameworks

one API. eight implementations.

not a wrapper. not a polyfill. each framework adapter is written for that framework. react hooks obey rules of hooks. vue composables use reactivity. svelte stores are reactive. solid signals are fine-grained. the API is the same. the internals respect the framework.

react vue svelte solid qwik preact angular vanilla

code

it looks like this.

react:

import { useResponsiveImage } from '@valtors/reflow/react'

function MyImage() {
  const src = useResponsiveImage({
    src: '/img/photo.jpg',
    widths: [400, 800, 1200],
    sizes: '(max-width: 600px) 100vw, 50vw'
  })
  return <img src={src} />
}

vue:

import { useResponsiveImage } from '@valtors/reflow/vue'

const src = useResponsiveImage({
  src: '/img/photo.jpg',
  widths: [400, 800, 1200],
  sizes: '(max-width: 600px) 100vw, 50vw'
})

same import path pattern. same options. same return. the framework changes. nothing else does.

ssr

it works on the server. that's the whole point.

most responsive libraries assume there's a window. there isn't always a window. SSR doesn't have one. static generation doesn't have one. the first render happens in node, not in a browser, and window.innerWidth doesn't exist there.

reflow doesn't crash. it returns a sensible default on the server and hydrates on the client. no flash. no mismatch. no useEffect hack to detect the browser. it just works.

numbers

small. like it should be.

5kb

core, gzipped

runtime deps

frameworks

1.8k+

monthly downloads

zero dependencies means zero supply chain attacks. zero transitive updates breaking your build. zero node_modules bloat. you install usereflow and you get usereflow. nothing else.

install

one command. pick your framework.

npm install usereflow

# react
npm install @valtors/reflow-react

# vue
npm install @valtors/reflow-vue

# or just use the core
import { responsiveImage } from 'usereflow'

or read the docs on github. or the npm page. it's all there.