S
SolidJS•16mo ago
Robin Lindner

Modal Implementation

Has anyone ever written a generic component for a modal? Something lean and not an external UI framework is enough for me. I heard the <portal> component is quite useful for this. Background is that I want/need to implement a small DSGVO modal.
6 Replies
Unknown User
Unknown User•16mo ago
Message Not Public
Sign In & Join Server To View
thisbeyond
thisbeyond•16mo ago
I roughly do this in a modals component: 
  const isOpen = () => api.getActiveModal() !== null;

  return ( 
     <Show when={isOpen()}>
        <ModalOverlay ref={element} onClick={onClick}> 
             <Dynamic {...(api.getActiveModal())} /> 
       </ModalOverlay> 
     </Show>
 ) 
  const isOpen = () => api.getActiveModal() !== null;

  return ( 
     <Show when={isOpen()}>
        <ModalOverlay ref={element} onClick={onClick}> 
             <Dynamic {...(api.getActiveModal())} /> 
       </ModalOverlay> 
     </Show>
 )
Unknown User
Unknown User•16mo ago
Message Not Public
Sign In & Join Server To View
thisbeyond
thisbeyond•16mo ago
I then set modal in a shared context from anywhere in the app.
Unknown User
Unknown User•16mo ago
Message Not Public
Sign In & Join Server To View
thisbeyond
thisbeyond•16mo ago
Yeah, this is rough and ready approach if you don't want lots of functionality / animation.
Want results from more Discord servers?
Add your server
More Posts
createServerData$ questionHi, In example page below, why do I need to call `data()` in the export page function for the dataLoad component after createServerData$ fetches data and it is renderedOnce upon a time, using solidJS, I used .state from createResource to check when the .state was equaCan I make getElementById reactive?I want to use document.getElementById () as signal. Is it possible?how to handle POST in a route?Hey there, I was looking for something like remix’s action/useActionData, but I don’t even have the useServerContext() returns empty object in server$() callbackhow come `useServerContext()` returns an empty object in `server$()` callbacks?How to not render <Portal> if mount is undefined?It seems <Portal> always insert to document.body if the mount is null. But I only want to render tget cookie inside $server rpc callHi, how can I get an http cookie inside $server rpc context? This is possible using tRPC, and I'm hoSolid PointerEvents, Firefox, RequestAnimationFrame and OffsetX/YHere's one that took up a bit of my afternoon after I wrote a RAF debouncer. Does Solid 'do' anythinMutating element onMount doesn't re-renderI am trying to mutate the innerText (or innerHTML) of a <div /> in an async function that I dispatchcreate-solid messed up peer dependenciesUpon creation I've got this warning ``` WARN  Issues with peer dependencies found . ├─┬ solid-start-