audemodo/audemodo-responsive-keepalive

When a web app has completely different layouts for mobile and desktop, switching between them at a screen-size boundary usually wipes out whatever state the user had built up: scroll position, form text they typed, dropdown menus that were open. This happens because React unmounts one component tree and mounts another fresh. The responsive-keepalive library fixes that by keeping both trees alive simultaneously, using a React 19.2 feature called Activity to hide the inactive one rather than remove it from the page entirely. The library ships as an npm package and requires React 19.2 or newer as a peer dependency. Developers define breakpoints once, give each a name (for example mobile and desktop), and wrap their layouts with the provided Responsive component. When the screen size crosses a boundary, the active layout switches but neither layout loses its internal state. It falls back to a simpler swap-and-unmount strategy on older React versions. Beyond the core mobile-desktop case, the library also handles container-level responsiveness: a single card can watch its own width and rearrange itself independently of the viewport. This uses the browser's ResizeObserver API. There is also a useSharedState hook that lets two sibling layouts read and write the same value without passing it through a shared parent component. Two smaller quality-of-life features address common pain points with responsiveness: an anti-thrash setting that delays a switch until the screen size has been stable for a set number of milliseconds, and an IME-safe mode that holds off on switching while the user is typing with an input method editor, relevant for Chinese, Japanese, or Korean text entry. Both are optional and configured per hook call. The package has no runtime dependencies, works in server-side rendering environments, and ships in both ESM and CommonJS formats with TypeScript types included. It is released under the MIT license.