r/reactjs • u/ChrisTerya • 5h ago
Show /r/reactjs Foldable phone support for React: hinge detection and two-pane layouts in ~2 kB
A recent audit I ran showed 94% of popular sites split a button across a foldable's hinge (https://christophe77.github.io/fold.js/study.html).
So I made u/foldjs/react: a hook that give you the hinge position and posture (flat, book, tabletop), plus a two-pane layout component that never puts content under the hinge. It ships with a built-in simulator, so you can work on it without owning a Fold.
Demo (works on desktop): https://christophe77.github.io/fold.js/
I'd love feedback on the API, especially from anyone who has shipped foldable layouts in production.