Sync state with URL params in Remix

This weekend I was tinkering with string-strip-html GUI; I wanted to sync the state with URL params so that users could bookmark the page and visit later and automatically get those settings restored.

Here’s an MVP based on a forked Remix.js starter template on StackBlitz.

---

Open it in a new tab, from within StackBlitz, so that there are no iframes, then change the checkboxes and observe the URL of the page:

Notes:

• The useEffect sets the state according to the URL’s parameters. From there on, UI toggles update the state and set the URL parameters imperatively.
• If we used <Link to=""> instead of <a href=""> in preset links, the page would not reload, so URL’s params would not update. Link presets here to emulate the visitor opening the page from fresh, in a new tab.