Modal routes

There are various ways to create routes for modal windows. However, in this library, we have a powerful tool:VirtualRoute, which can handle all the necessary scenarios that fall outside the scope of conventional client-side routing.

This recipe explains how to implement a modal route usingVirtualRoute.

There are two primary approaches here:

• State via aqueryparameter
• Local state (orsessionStorage,localStorage)

State via aqueryparameter

One possible implementation:

exportconstmodalRoute=newVirtualRoute({checkOpened: ({query})=>!!query.data.yourModal,open: (_, {query})=>{query.update({ yourModal:true});returntrue;},close: ({query})=>{query.update({ yourModal:undefined});returnfalse;},});

Variant with specifying additional parameters via Query:

exportconstmodalRoute=newVirtualRoute({initialParams: ({query})=>({paramA: query.data.paramA||'',paramB: query.data.paramA||'',}),checkOpened: ({query})=>!!query.data.yourModal,open: (params, {query})=>{query.update({ yourModal:true,...params });returntrue;},close: ({query})=>{query.update({ yourModal:undefined});returnfalse;},});

Local state

Possible implementations:

local state

exportconstmodalRoute=newVirtualRoute();

usinglocalStorage

exportconstmodalRoute=newVirtualRoute({checkOpened: ()=>!!localStorage.getItem('yourModal'),open: ()=>{localStorage.setItem('yourModal',true);returntrue;},close: ()=>{localStorage.removeItem('yourModal');returnfalse;},});